vue中wangeditor富文本框的使用方法

vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor 。开始我用的是 vue-quill-editor，后来又换成了 wangeditor。为啥呢？因为 vue-quill-editor 无法使用表格，而且不能汉化，即使使用了官方提供的改变css的那套方法也感觉很丑。

先看看使用 wangeditor 之后的页面效果吧

再看看代码里如何使用的吧

<el-form-item label="内容：" prop="content" ref="contentRef">
   <div class="editDiv">
      <div id="textEditor"></div>
      <div class="textNum">{{ TiLength }}/5000</div>
   </div>
</el-form-item>

import E from 'wangeditor'

mounted() {
    this.editorInit()
},
methods: {
    // 富文本框初始化
    editorInit() {
      this.contentEditor = new E('#textEditor')
      this.contentEditor.config.height = 340
      // 本身默认的zIndex太大，导致有弹框时浮在上面
      this.contentEditor.config.zIndex = 10
      // 隐藏网络图片
      this.contentEditor.config.showLinkImg = false
      // 自定义上传图片
      this.contentEditor.config.customUploadImg = async (
        files,
        insertImgFn
      ) => {
        // 调接口上传图片
        uploadFile({
          file: files[0]
        }).then((res) => {
          if (res.code === '200') {
            // 此方法是富文本自带的方法，将图片插入到编辑器中
            insertImgFn(`${process.env.VUE_APP_UPLOAD_URL}/${res.data}`)
          }
        })
      }
      this.contentEditor.config.onchange = () => {
        this.TiLength = this.contentEditor.txt.text().length
        this.mergeData.content = this.contentEditor.txt.html()
        if (this.TiLength) {
          this.$refs.contentRef.clearValidate()
        }
      }
      this.contentEditor.config.onchangeTimeout = 500
      this.contentEditor.create()
},

上面我使用的上传图片是自定义上传，开始使用的base64格式的图片，但此种格式保存时字段太长，且大小有限制，所以换成了接口上传的方式