wordpress vipsystem,搜索引擎关键词优化,小制作小发明做法,html5开发工具有哪些文章目录 前言开发定位目标调研技术方案前提工作量安排数据库表设计实现步骤1、引入依赖2、实现cherry-markdown的vue组件#xff08;修改上传接口路径#xff09;3、支持draw.io组件4、支持展示悬浮目录toc前端使用#xff1a;编辑状态使用cherry-markdown的vue组件前端使用… 文章目录 前言开发定位目标调研技术方案前提工作量安排数据库表设计实现步骤1、引入依赖2、实现cherry-markdown的vue组件修改上传接口路径3、支持draw.io组件4、支持展示悬浮目录toc前端使用编辑状态使用cherry-markdown的vue组件前端使用展示markdown对外展示 问题解决问题1cherrymarkdown不随对应的markdown加载最新的问题2在一个vue文件中使用了两次cherrymarkdown组件打开一个之后另一个位置打开时就会出现空情况问题3cherry-markdown中支持虚拟目录toc 前言
博主介绍✌目前全网粉丝3Wcsdn博客专家、Java领域优质创作者博客之星、阿里云平台优质作者、专注于Java后端技术领域。
涵盖技术内容Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。
博主所有博客文件目录索引博客目录索引(持续更新)
视频平台b站-Coder长路 开发定位
个人开源项目https://gitee.com/changluJava/studio-vue位于开发分支feat_1.2.x_fsstudio提交哈希码9fff82c76f5a02e0977455fe53d2c560ca4c0ca7 目标
支持cherry markdown语法编辑博文 调研
Quill富文本编辑器
CherryMarkdown (推荐)https://github.com/Tencent/cherry-markdown
推荐
Tinymce富文本编辑器
可学习案例ruo-yi-vue-bloghttps://gitee.com/Ning310975876/ruo-yi-vue-blog 技术方案
前提
将studio-ui改造为studio-ui-vite为vite版本引入cherry-markdown没有报错问题。 工作量安排
改造studio_think表
改造studio_race表
改造studio_ccie表 数据库表设计
针对有包含文本内容编辑的都额外支持一个字段content_markdown
主要包含两个字段存储博文内容content博客文章html、contentMarkdown博客文章markdown格式内容 包含有存储内容形式的表如下 studio_ccie证书表
原字段ccie_thinkstudio_race竞赛表
原字段race_summarizestudio_think个人思考表
原字段content改造后
content
content_markdown实现步骤
1、引入依赖
package.json添加依赖
cherry-markdown: 0.8.22安装依赖
npm install --force2、实现cherry-markdown的vue组件修改上传接口路径
在components目录下添加cherry-markdown组件 修改该组件的上传图片地址
import commonConfig from /api/common.js;// 图片上传路径修改为自己连接
request.open(POST, commonConfig.uploadAction) // 上传的图片服务器地址修改上传资源之后的markdown语法
if (resp.code 200) {if (/mp4|avi|rmvb/i.test(resp.fileSuffix)) {imgMdStr !video[${resp.data.originName}](${resp.data.visitUrl});} else if (/mp3/i.test(resp.fileSuffix)) {imgMdStr !audio[${resp.data.originName}](${resp.data.visitUrl});} else if (/bmp|gif|jpg|jpeg|png/i.test(resp.fileSuffix)) {imgMdStr } else {imgMdStr }
}3、支持draw.io组件
支持引入draw.io引入该drawio目录 效果展示 实际打开的时候访问的就是我们对应的public下的目录 4、支持展示悬浮目录toc
原始
toc: {/** 默认只渲染一个目录 */allowMultiToc: false
},修改后
toc: {updateLocationHash: true, // 要不要更新URL的hashdefaultModel: pure, // pure: 精简模式/缩略模式只有一排小点 full: 完整模式会展示所有标题
},前端使用编辑状态使用cherry-markdown的vue组件
使用方式如下
CherryMarkdown refCherryMarkdown :height400 v-modelblogText.contentMarkdown /CherryMarkdownimport CherryMarkdown from /components/CherryMarkdowncomponents: {CherryMarkdown},data() {return {// 博客内容blogText: {contentMarkdown: ,content: }}},methods: {submitForm() {this.setFormContent()console.log(submitForm, this.blogText)},// 对于markdown的html需要调用对应markdown组件中的getCherryHtml()方法setFormContent(){this.blogText.content this.$refs.CherryMarkdown.getCherryHtml()},}最终效果演示
关注这两个内容即可分别一个是html内容另一个是markdown内容 前端使用展示markdown对外展示
代码如下这里若是仅仅只需要预览添加该属性即可:defaultModelpreviewOnly
CherryMarkdown v-ifpreviewOpen v-modelcurThinkMarkdown :defaultModelpreviewOnly/CherryMarkdownimport CherryMarkdown from /components/CherryMarkdowncomponents: {CherryMarkdown},效果 问题解决
问题1cherrymarkdown不随对应的markdown加载最新的
**场景**例如编辑打开了一个markdown此时又编辑打开另一个markdown此时依旧是原先的markdown内容。
修复方式
在cherrymarkdown组件中添加watch watch: {// 监控 value 属性value(newValue, oldValue) {// 当 value 发生变化时这个函数会被调用// console.log(value changed from ${oldValue} to ${newValue});this.setMarkdown(newValue)}}, 问题2在一个vue文件中使用了两次cherrymarkdown组件打开一个之后另一个位置打开时就会出现空情况
**场景**首先打开预览总结的然后打开添加或编辑的此时就会为空 解决方案
在对应的对框中的组件里分别加上v-if随着预览对话框的是否展示而统一进行变动 此时即可解决该问题。 问题3cherry-markdown中支持虚拟目录toc
问题描述
按照网站的配置参数https://blog.csdn.net/weixin_73480865/article/details/136604029发现不生效
问题解决
首先确认你的cherry版本我一开始是0.8.22可以找到node_module中对应cherry-markdown的config.js在配置文件中看是否支持这个toc若是有下面的配置项就是支持的 关于cherry团队在github解决的issue
[docs]自定义语法https://github.com/Tencent/cherry-markdown/issues/620添加目录在预览时的右侧[Feature Request]https://github.com/Tencent/cherry-markdown/issues/658
最终经过验证补充的toc配置方式 toc: true, // 不展示悬浮目录
toc: {updateLocationHash: false, // 要不要更新URL的hashdefaultModel: full, // pure: 精简模式/缩略模式只有一排小点 full: 完整模式会展示所有标题showAutoNumber: false, // 是否显示自增序号position: fixed, // 悬浮目录的悬浮方式。当滚动条在cherry内部时用absolute当滚动条在cherry外部时用fixedcssText: , // 自定义样式
},此时右侧出现了toc悬浮目录 整理者长路 时间2024.9.7-9.21
