yuezhilian-admin/src/components/common/wang-edit.vue

<template>
  <div class="text-edit">
    <div id="myeditor"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import WangEditor from 'wangeditor';
export default {
  name: 'wang-edit',
  // components: { WangEditor },
  props: {
    text: {
      type: String
    }
  },
  data() {
    return {
      editor: null,
      isPaste: false,
      info_: '', // 当前修改的文本
      currentImg: '' // 当前粘贴图片
    };
  },
  computed: {},
  mounted() {
    this.createEditor();
    this.editor.txt.html(this.text);
  },
  methods: {
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new Blob([u8arr], { type: mime });
    },
    createEditor() {
      var that = this;
      this.editor = new WangEditor('#myeditor');
      console.log(this.editor.customConfig);
      this.editor.customConfig.pasteFilterStyle = true; // 带样式粘贴
      this.editor.customConfig.pasteIgnoreImg = true; // 忽略粘贴内容中的图片
      this.editor.customConfig.showLinkImg = false;
      this.editor.customConfig.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'
      ];
      // 自定义上传图片
      this.editor.customConfig.customUploadImg = function (files, insert) {
        // 粘贴截图会触发customUploadImg方法，不走自定义粘贴
        that.isPaste = true;
        that.upPic(files[0], (res) => {
          insert(res);
          that.isPaste = false;
        });
      };

      // 粘贴网络图片(不包括截图)时，使用pasteTextHandle自定义过滤原始图片
      this.editor.customConfig.pasteTextHandle = function (content) {
        return content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '');
      };
      // 文本实时更新
      this.editor.customConfig.onchange = (html) => {
        that.info_ = html;
        that.$emit('change', that.info_); // 将内容同步到父组件中
      };
      // 自定义粘贴截图图片
      window.addEventListener('paste', function (e) {
        function dataURLtoBlob(dataurl) {
          // base64转blob方法
          var arr = dataurl.split(',');
          var mime = arr[0].match(/:(.*?);/)[1];
          var bstr = atob(arr[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);

          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
        }
        var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
        var isIE11 =
          userAgent.indexOf('Trident') > -1 &&
          userAgent.indexOf('rv:11.0') > -1;
        if (isIE11) {
          // IE11粘贴图片需要注意：
          //  1.粘贴截图返回base64,使用querySelectorAll获取base64地址转为blob
          //  2.插入图片方法insertImage
          //  3.使用base64图片标签正则表达式匹配并删除原base64图片
          setTimeout(() => {
            // 获取最新一张粘贴的base64图片地址并转化为blob文件
            var imgList = document.querySelectorAll('.w-e-text img');
            var len = imgList.length;
            var src_str = imgList[len - 1].src;
            var file = dataURLtoBlob(src_str);
            // 获取现在编辑器所有的内容，匹配所有的base64图片并删除
            let currentHtml = that.editor.txt.html();
            that.editor.txt.html(
              currentHtml.replace(
                /<img [^>]*src=['"](data:+)([^'"]+)[^>]*>/gi,
                ''
              )
            );
            that.upPic(file, (res) => {
              // 图片转oss插入编辑器
              that.editor.cmd.do('insertImage', res);
            });
          }, 0);
        } else {
          // chrome浏览器粘贴图片需要注意：
          //  1.使用clipboardData获取粘贴图片file文件
          //  2.插入图片方法insertHtml
          //  3.使用wangEditor自带的pasteTextHandle方法过滤原始图片
          if (that.isPaste) {
            // 粘贴截图时会触发customUploadImg方法
            return false;
          }
          let clipboardData = e.clipboardData;
          let types;
          let items;
          let item;
          items = clipboardData.items;
          types = clipboardData.types || [];
          for (let i = 0; i < types.length; i++) {
            if (types[i] === 'Files') {
              item = items[i];
              break;
            }
          }
          if (item && item.type.match(/^image\//i)) {
            // 筛选图片文件自定义上传
            that.upPic(item.getAsFile(), (res) => {
              that.editor.cmd.do(
                'insertHtml',
                '<img src="' + res + '" style="max-width:100%;"/>'
              );
            });
          }
        }
      });
      this.editor.create();
    },
    upPic(file, fun) {
      this.httpUploadImg({ prefix: 'other', file }).then(
        (res) => {
          fun(res);
        },
        (err) => {
          console.log(err);
        }
      );
    }
  },
  watch: {
    text(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(value);
      }
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

* {
  box-sizing: border-box;
}

.text-edit {
  z-index: 1;
}

>>>.w-e-text-container {
  height: 720px !important;
}
</style>