vue2富文本功能实现的两种方式（v-md-editor+mavon-editor）-CSDN博客

本文链接：https://blog.csdn.net/justleavel/article/details/129124101

项目开源地址：https://gitee.com/kalashok-pan/zhi-blog-plus

1：v-md-editor实现图片上传：效果：

在这里插入图片描述

代码实现：这里的uploadOssImage是封装好的axios请求，根据自己项目的请求替换：

      <v-md-editor v-model="form.articleContent"
                   class="ed"
                   placeholder="请输入内容"
                   :disabled-menus="[]"
                   @upload-image="handleUploadImage"
      >

      </v-md-editor>

handleUploadImage:

    handleUploadImage(event,insertImage,files){
      for(let i in files){
      let  formData = new FormData();
      formData.append('file', files[i]);
        uploadOssImage(formData).then(response =>
        {
            this.$modal.msgSuccess("上传成功");
            insertImage({
              url:response.data.url,
              desc: response.data.fileName,
        })
      },
    )
  }

在这里插入图片描述

2：mavon-editor效果：

在这里插入图片描述

2.1：首先引入:`npm install mavon-editor --save`

2.2: 全局注册，主要是中间三句

main.js:

// 全局注册
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main'
    })

2.3：

在这里插入图片描述


    <mavon-editor
      ref="md"
      @imgAdd="handleEditorImgAdd"
      @imgDel="handleEditorImgDel"
      v-model="form.aboutContent"
      style="height:calc(100vh - 250px);margin-top:2.25rem"
    />

  handleEditorImgAdd (pos,file) {
      let formdata = new FormData()
      formdata.append('file', file)
      this.imgFile[pos] = file
      uploadOssImage(formdata).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("上传成功");
          let url = res.data.url
          let name = file.name
          if (name.includes('-')) {
            name = name.replace(/-/g, '')
          }
          let content = this.form.aboutContent
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的
          this.$refs.md.$img2Url(pos, res.data.url);
        } else {
          this.$modal.msgError(res.data.msg);
        }
      })
    },
    handleEditorImgDel (pos) {
      delete this.imgFile[pos]
    },