JS实现markdown

<el-dialog :visible.sync="addVisible" class="addDialog" @opened="createEditor" @close="resetForm('addForm')">
        <el-form-item prop="noteContent">
          <div ref="editor" v-html="addForm.noteEditor"></div>
          <el-input type="textarea" v-model="addForm.noteContent" readonly v-show="false" ></el-input>
        </el-form-item>
</el-dialog>

import wangEditor from 'wangeditor'

data () {
    return {
      editor: null,
      addForm: {
        noteEditor: '',
        noteContent: ''
      }
    }
}

 输入内容为noteContent

    //创建富文本编辑器
    createEditor(){
      //创建编辑器
      const editor = new wangEditor(this.$refs.editor)
      // 设置编辑区域高度为 500px
      editor.config.height = 370
      // 配置菜单栏，设置不需要的菜单
      editor.config.excludeMenus = [
          'todo',
          'video',
          'image'
      ],
      //隐藏插入网络图片的功能
      editor.config.showLinkImg = false
      
      editor.config.onchange = (newHtml) => {
        this.addForm.noteContent = newHtml
        this.editForm.noteContent = newHtml
      }
      
      //上传文件
      // editor.config.uploadImgServer = 'http://127.0.0.1:8000/backend/upload'
      editor.config.uploadImgServer = 'https://atsweb.psh.corp.pegatron:811/backend/upload'
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
      editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png']
      editor.config.uploadImgMaxLength = 3 // 一次最多上传 3 个图片
      editor.config.uploadImgParams = {
          updir: 'detail',
      }
      editor.config.uploadFileName = 'image'
    
      editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            console.log(xhr)

            // 可阻止图片上传
            // return {
            //     prevent: true,
            //     msg: '需要提示给用户的错误信息'
            // }
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)

            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.data[0])
        }
      }
      
      editor.create()
      this.editor = editor
    },

    resetForm(form) {
      if(form=='addForm'){
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy()
        this.editor = null
        this.addForm = {}
        this.$refs.addForm.resetFields()
      }
    }

this.editor.destroy()

关闭时务必销毁编辑器，避免打开dialog重复创建编辑器