|
vue使用mavon-editor保存md到数据库，页面回显，二次编辑
场景：
最近研究markdown的编辑器，使用他进行上传图片，编写文本和代码，并保存到数据库。调用接口查询进行页面回显。保存到数据库的md格式的文本，可重新渲染到编辑器进行二次编辑
效果图：
保存数据库之前：
保存的东西：
数据库存了两种结构：
因为发现回显需要的是html结构的，而重新填回编辑器需要的是md格式的 
回显：
用的是html字符格式的，也就是docxContentHtml这个字段 
二次编辑：
用的是md格式的，也就是docxContent这个字段 
代码实现：
//工具栏
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
navigation: true, // 导航目录
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
subfield: true, // 单双栏模式
preview: true // 预览
},
//主题
codeStyle:'monokai-sublime',
POSTDocx:{
input:{
value:{
docxTitle:undefined,
docxBrief:undefined,
docxContent:`请输入文章正文`,
categoryId:undefined,
docxTime:new Date().format('yyyy/MM/dd hh:mm:ss'),
}
},
format_html:undefined, //这是html结构的用于详情页展示
},
//这两个就可以分别拿去存到数据库，针对不同场景进行使用
console.log('html格式',this.$refs.md.d_render)
console.log('md格式',this.$refs.md.d_value)
图片上传：
//上传图片
handleEditorImgAdd(place,$file){
let formdata = new FormData()
formdata.append('file', $file)
this.http({
cmd: 'POSTImgUpload', //POSTAdminInvitationAdd
input: formdata,
success (res) {
if (res.code === 200) {
this.$message.success('上传成功')
let url = res.data.url.replace(/\\/g,"/")
//第二步.将返回的url替换到文本原位置 ->  这里是必须要有的
this.$refs.md.$img2Url(place, window.config.host+url);
}else{
this.$message.error(res.msg)
}
}
})
}
|