vue使用mavon-editor保存md到数据库,页面回显,二次编辑
vue使用mavon-editor保存md到数据库,页面回显,二次编辑场景:最近研究markdown的编辑器,使用他进行上传图片,编写文本和代码,并保存到数据库。调用接口查询进行页面回显。保存到数据库的md格式的文本,可重新渲染到编辑器进行二次编辑效果图:保存数据库之前:保存的东西:数据库存了两种结构:因为发现回显需要的是html结构的,而重新填回编辑器需要的是md格式的回显:用的是html字符格
·
vue使用mavon-editor保存md到数据库,页面回显,二次编辑
场景:
最近研究markdown的编辑器,使用他进行上传图片,编写文本和代码,并保存到数据库。调用接口查询进行页面回显。保存到数据库的md格式的文本,可重新渲染到编辑器进行二次编辑
效果图:
保存数据库之前:
保存的东西:
数据库存了两种结构:
因为发现回显需要的是html结构的,而重新填回编辑器需要的是md格式的
回显:
用的是html字符格式的,也就是docxContentHtml这个字段
二次编辑:
用的是md格式的,也就是docxContent这个字段
代码实现:
<mavon-editor
:codeStyle="codeStyle"
:toolbars="toolbars"
v-model="POSTDocx.input.value.docxContent"
:ishljs="true"
ref="md"
@change="change"
@imgAdd="handleEditorImgAdd"
@imgDel="handleEditorImgDel"
/>
//工具栏
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替换到文本原位置![...](0) -> ![...](url) 这里是必须要有的
this.$refs.md.$img2Url(place, window.config.host+url);
}else{
this.$message.error(res.msg)
}
}
})
}
更多推荐
已为社区贡献20条内容
所有评论(0)