wangeditor v4封装

"i18next": "^21.4.0",多语言

"wangeditor": "^4.7.15",可复制粘贴单张图片

<template>
  <div id="wangEditor">
  </div>
</template>

<script>
import E from 'wangeditor'
import i18next from 'i18next'
import { uploadPicOrVideo } from '@/api/dataInsight/knowledge'

export default {
  name: 'WangEditor',
  props: {
    html: {
      type: String,
      default: '',
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      editor: '',

    }
  },
  watch: {
    //为了解决实时显示编辑器内容
    html: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal && this.editor)
            this.editor.txt.html(newVal)
        })
      },
      deep: true,
      immediate: true,
    },
    isDisabled: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            if (newVal && this.editor)
              this.editor.disable()
          })
        }
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    // 处理粘贴的图片，传递的参数是粘贴来的数据
    disposePasteImg(pasteStr) {
      console.log(pasteStr);
      let _this = this;
      return new Promise(function (resolve) {
        // 用于计数图片数量
        let imgNum = 0;
        //匹配图片
        let imgReg = /<img.*?(?:>|\/>)/gi;
        //匹配src属性
        // eslint-disable-next-line no-useless-escape
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        // 提取图片连接
        if (pasteStr.match(imgReg)) {
          pasteStr.replace(imgReg, function (txt) {
            return txt.replace(srcReg, function (src) {
              let img_src = src.match(srcReg)[1];
              console.log(img_src);
              //正则把?x-oss-process后面的都去掉
              img_src = img_src.replace(/\?.*/i, "");
              img_src = img_src.replace("file:///", "");
              // 查找到一个图片地址就讲图片数量加1
              imgNum++;
              // 将图片转成图片文件对象并上传得到图片地址，传递的参数是图片地址
              _this.imgUrlSwitchBlob(img_src).then((res) => {
                console.log("得到的地址res", res);
                /**
                 * 得到图片地址进行替换并将替换之后的文本返回渲染
                 */
                // 图片地址进行替换
                pasteStr = pasteStr.replace(img_src, res);
                // 替换之后将图片数量减1
                imgNum--;
                // 只有图片数量变成0的时候才会进行返回
                if (imgNum == 0) {
                  console.log("返回imgNum", imgNum, pasteStr)
                  resolve(pasteStr);
                }
              });
            });
          });
        } else {
          resolve(pasteStr);
        }
      });
    },
    imgUrlSwitchBlob(param) {
      let _this = this;
      return new Promise(function (resolve) {
        // 得到图片后缀
        let suffix = param.substring(param.lastIndexOf(".") + 1); //获取后缀
        // 设置图片名称及后缀

        const key =
          new Date().getTime() +
          Math.random().toString().substr(2, 5) +
          "." +
          suffix;
        console.log("得到的key", key);
        // 创建图片对象
        let image = new Image();
        // 允许跨域
        image.setAttribute("crossOrigin", "anonymous");
        image.src = param;
        image.onload = () => {
          console.log("onload");
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let ctx = canvas.getContext("2d");
          ctx.drawImage(image, 0, 0, image.width, image.height);
          canvas.toBlob((blob) => {
            console.log("blob", blob)
            // 得到的blob是一个图片对象，经图片对象进行上传得到图片地址.key是文件名称
            /**
             * @函数名称: 调用函数进行上传
             * @返回值: 得到的图片路径
             * @param {String} key 图片名称，包含后缀
             * @param {Object} blob 文件对象
             */
            _this.upPasteImg(key, blob).then((res) => {
              resolve(res);
            });
          });
        };
        image.onload();
      });
    },
    upPasteImg(key, file) {
      console.log("得到的file", file);
      let _this = this;
      let formdata = new FormData()
      formdata.append('file', file)
      return new Promise(function (resolve) {
        uploadPicOrVideo(formdata).then(res => {
          if (res && res.code === 200) {
            let imgUrl = res.data
            resolve(imgUrl)
            fileInfo.status = 'done'
          } else {
            fileInfo.status = 'error'
          }
        }).catch(err => {
          fileInfo.status = 'error'
        })
      })
    },
  },
  mounted() {
    const _this = this
    this.editor = new E('#wangEditor')
    // 配置全屏功能按钮是否展示
    this.editor.config.showFullScreen = false
    // console.log(this.editor.config.menus)
    //   this.editor.config.menus = [
    //   "head",
    //   "bold",
    //   "fontSize",
    //   "fontName",
    //   "italic",
    //   "underline",
    //   "strikeThrough",
    //   "indent",
    //   "lineHeight",
    //   "foreColor",
    //   "backColor",
    //   "link",
    //   "list",
    //   "todo",
    //   "justify",
    //   "quote",
    //   "emoticon",
    //   "image",
    //   "video",
    //   "table",
    //   "code",
    //   "splitLine",
    //   "undo",
    //   "redo"
    // ]
    if(localStorage.getItem('language')=='en-US'){
      this.editor.config.lang = 'en'
    }else{
      this.editor.config.lang = 'zh-CN'
    }
    this.editor.i18next = i18next;
    this.editor.config.uploadImgShowBase64 = true;
    this.editor.config.showLinkImg = false;
    this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
      console.log(resultFiles);
      let formData = new FormData()
      let file = resultFiles[0];
      formData.append('file', file)
      uploadPicOrVideo(formData).then(res => {
        if (res && res.code === 200) {
          let imgUrl = res.data
          insertImgFn(imgUrl)
        }
      }).catch(err => {
      })
    }

    this.editor.config.onchange = function (newHtml) {
      _this.$emit('receiveContent', newHtml)
    };

    // 配置粘贴文本的内容处理
    // this.editor.config.pasteTextHandle = function (pasteStr) {
    //   // 需要判断是否是纯文本，不是纯文本执行函数，是纯文本返回
    //   // 验证图片中是否包含img标签，具有得到true否则得到false
    //   var containsImage = pasteStr.search(/<img /i) >= 0;
    //   // 存在图片就执行
    //   if (containsImage) {
    //     // 打开loading
    //     _this.pasteTextFulfill = true;
    //     _this.disposePasteImg(pasteStr).then((res) => {
    //       console.log("配置粘贴文本的内容处理res", res);
    //       _this.editor.cmd.do('insertHTML', res) // 在光标位置插入内容
    //       // editor.txt.append(res); // 将内容追加上
    //       // 关闭loading
    //       _this.pasteTextFulfill = false;
    //     });
    //   }
    //   return containsImage ? "" : pasteStr;
    // };

    this.editor.create()

    // this.editor.disable()
    // console.log('@', this.editor)
    // console.log(this.editor.config.menus)
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  },
}
</script>

<style>
.w-e-text-container {
  height: calc(100% - 42px) !important;
}

.w-e-content-preview {
  background: #f3f3f3;
}
</style>