vue2项目使用wangEditor富文本插件

        最近在vue2项目中使用了富文本插件wangEditor实现了基本功能以及图片上传，官方文档地址：安装 | wangEditor。用这篇文章记录一下在使用过程踩到的坑和解决的问题。

vue2安装命令：

npm install @wangeditor/editor-for-vue --save

 引入样式：

<style src="@wangeditor/editor/dist/css/style.css"></style>

主要api：

获取富文本编辑器中的内容：editor.getHtml()

清空富文本编辑器中的内容：editor.clear()

主要属性：

readOnly（只读属性，因为项目中涉及富文本的展示，这时是只读状态）

autoFocus（取消自动聚焦，因为富文本编辑器默认会自动聚焦）

2023.7.27更新：（项目中富文本编辑器又增加了新的需求：上传附件）

下载插件：npm install @wangeditor/plugin-upload-attachment

引入：

import { Boot } from '@wangeditor/editor'
Boot.registerModule(attachmentModule)

创建WangEdit.vue公共文件，主要内容：

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      :value="myHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      myHtml: '',
      toolbarConfig: {
// 插入哪些菜单
        insertKeys: {
           index: 21, // 自定义插入的位置
           keys: ['uploadAttachment'], // “上传附件”菜单
        },
        excludeKeys: [
          // 排除菜单组，写菜单组 key 的值即可
          'group-video', //去掉视频
          'fullScreen',
          'insertTable',
          'insertImage',
        ],
      },
      mode: 'default', // or 'simple'
      editorConfig: {
        placeholder:'',
        MENU_CONF: {
          uploadImage: {
            customUpload: this.uploadImg,
          },
          // “上传附件”菜单的配置
          uploadAttachment: {
            server: '', // 服务端地址
            timeout: 5 * 1000, // 5s
            fieldName: 'file',
            meta: { token: 'xxx', a: 100 }, // 请求时附加的数据
            metaWithUrl: true, // meta 拼接到 url 上
            headers: {
            token: Vue.prototype.localData.ss.get('ACCESS_TOKEN'),
            },
            onFailed(file, res) {
              alert(res.message)
              console.log('onFailed', file, res)
            },
            onError(file, err, res) {
              alert(err.message)
              console.error('onError', file, err, res)
            },
            onBeforeUpload(file) {
              // 判断前面是否有空行
              return file // 上传 file 文件
            },
              // 上传成功后，用户自定义插入文件
            customInsert(res, file, insertFn) {
              // const { url } = res.data || {}
              // if (!url) throw new Error(`url is empty`)
              // 插入附件到编辑器
              insertFn(file.name, `/dfs/${res.data}`)
             },
           },
         },
         hoverbarKeys: {
           attachment: {
             menuKeys: ['downloadAttachment'], // “下载附件”菜单
           },
         },
        autoFocus: false,
        readOnly: this.readOnly,
      },
      uploadConfig: {
        api: '', //上传图片的地址
        headers: {
          token: '', 上传图片需要携带的token
        },
      },
    }
  },
  props: ['myHtml', 'readOnly'],
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    uploadImg(file, insertFn) {
      let imgData = new FormData()
      imgData.append('file', file)
      axios({
        url: this.uploadConfig.api,
        method: 'post',
        data: imgData,
      }).then((response) => {
        console.log(response, 'response')
        if (response.data.code == 0) {
          insertFn('/dfs/' + response.data.data)
        } else {
          this.$message.warning('上传失败')
        }
      })
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    // }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
})

        另外，wangEditor在使用过程中会与antd输入框事件冲突，只需要把Editor中的v-model改为:value，同时使用api来获取富文本编辑器内容就可以解决这个问题。