vue使用mavon-editor保存md到数据库，页面回显，二次编辑

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)
        }
      }
    })
  }