nuxt整合mavon-editor（markdown富文本编辑器）

1、npm i -S mavon-editor
2、plugins新建mavon-editor.js
    import Vue from ‘vue‘
    import mavonEditor from ‘mavon-editor‘
    
    Vue.use(mavonEditor)
3、配置nuxt.config.js
    css: [
        ‘mavon-editor/dist/css/index.css‘
    ],
    plugins: [
        {src: ‘@/plugins/mavon-editor.js‘, mode: ‘client‘},
    ],
4、使用
<template>
  <div>
    <!--
    :autofocus="false"：不自动获取焦点
    @change="getMdHtml"：内容改变事件
    @imgAdd="uploadContentImg"：操作栏上传文件事件
    @imgDel="delConentImg"：操作栏删除文件事件
    -->
    <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                  @imgAdd="uploadContentImg" @imgDel="delConentImg"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mdContent: "",
        htmlContent: ""
      }
    },
    methods: {
      getMdHtml(mdContent, htmlContent) {//参数1：md语法内容，参数2：html语法内容
        this.htmlContent = htmlContent
      },
      uploadContentImg(pos, file) {
        const fd = new FormData()
        fd.append(‘file‘, file)
        this.$uploadImg(fd).then(response => {//上传图片接口
          if (response.code === 20000) {
            this.$refs.md.$img2Url(pos, response.data)//图片索引替换为url
          }
        })
      },
      delConentImg(urlAndFileArr) {
        const fileUrl = urlAndFileArr[0]
        const file = urlAndFileArr[1]
        this.$deleteImg(fileUrl)//删除图片接口
      }
    }
  }
</script>

<style scoped>
</style>