vue2使用wangeditor5及word导入解析的实现与问题

安装

wangeditor5

官网：https://www.wangeditor.com/v5/

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

mammoth.js

官网：https://github.com/mwilliamson/mammoth.js

npm install mammoth

若出现依赖包下载失败的情况，可能是镜像问题，可选择使用国内镜像，参考文档：https://blog.csdn.net/hyk521/article/details/140706064

使用

editor.vue：

<template>
  <div style="border: 1px solid #ccc;">
    <input type="file" id="weWordBtn" style="display:none;"
           accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="editorStyle"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @customPaste="customPaste"
    />
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Boot, DomEditor} from '@wangeditor/editor';
  import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
  import '@wangeditor/editor/dist/css/style.css';
  import {uploadPic} from "@/api/fileUpload/upload";
  import mammoth from "mammoth";
  import {Loading} from "element-ui";

  //自定义新菜单
  class wordImportMenu {
    constructor() {
      this.title = 'word导入';
      this.iconSvg = '<svg t="1721893685983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12124" width="16" height="16"><path d="M563.2 1006.933333s-3.413333 0 0 0l-549.546667-102.4c-6.826667-3.413333-13.653333-10.24-13.653333-17.066666V170.666667c0-6.826667 6.826667-13.653333 13.653333-17.066667l546.133334-136.533333c3.413333 0 10.24 0 13.653333 3.413333s6.826667 6.826667 6.826667 13.653333v955.733334c0 3.413333-3.413333 10.24-6.826667 13.653333-3.413333 3.413333-6.826667 3.413333-10.24 3.413333zM34.133333 873.813333l512 95.573334V54.613333L34.133333 184.32v689.493333z" fill="" p-id="12125"></path><path d="M1006.933333 938.666667h-443.733333c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667H989.866667v-785.066666H563.2c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667h443.733333c10.24 0 17.066667 6.826667 17.066667 17.066667v819.2c0 10.24-6.826667 17.066667-17.066667 17.066667zM358.4 699.733333c-6.826667 0-13.653333-6.826667-17.066667-13.653333l-68.266666-249.173333-68.266667 249.173333c-3.413333 6.826667-6.826667 13.653333-17.066667 13.653333-6.826667 0-13.653333-3.413333-17.066666-10.24l-102.4-307.2c-3.413333-10.24 3.413333-17.066667 10.24-20.48 10.24-3.413333 17.066667 3.413333 20.48 10.24l85.333333 252.586667 71.68-252.586667c3.413333-13.653333 27.306667-13.653333 34.133333 0l71.68 252.586667 85.333334-252.586667c3.413333-10.24 13.653333-13.653333 20.48-10.24 10.24 3.413333 13.653333 13.653333 10.24 20.48l-102.4 307.2c-3.413333 6.826667-10.24 10.24-17.066667 10.24z" fill="" p-id="12126"></path><path d="M904.533333 256h-341.333333c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066666h341.333333c10.24 0 17.066667 6.826667 17.066667 17.066666s-6.826667 17.066667-17.066667 17.066667zM904.533333 392.533333h-334.506666c-10.24 0-17.066667-6.826667-17.066667-17.066666s6.826667-17.066667 17.066667-17.066667h334.506666c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066666zM904.533333 529.066667h-341.333333c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066667h341.333333c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066667zM904.533333 665.6h-341.333333c-10.24 0-17.066667-6.826667-17.066667-17.066667s6.826667-17.066667 17.066667-17.066666h341.333333c10.24 0 17.066667 6.826667 17.066667 17.066666s-6.826667 17.066667-17.066667 17.066667zM904.533333 802.133333H580.266667c-10.24 0-17.066667-6.826667-17.066667-17.066666s6.826667-17.066667 17.066667-17.066667h324.266666c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066666z" fill="" p-id="12127"></path></svg>';
      this.tag = 'button';
    }

    //菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    isActive(editor) {
      return false;
    }

    //获取菜单执行时的 value，用不到则返回空字符串或 false
    getValue(editor) {
      return '';
    }

    //菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    isDisabled(editor) {
      return false; // or true
    }

    //点击菜单时触发的函数
    exec(editor, value) {
      document.getElementById('weWordBtn').click();
    }
  }

  const wordImportConf = {
    key: 'wordImport',
    factory() {
      return new wordImportMenu();
    }
  };
  Boot.registerMenu(wordImportConf);

  export default Vue.extend({
    components: {Editor, Toolbar},
    props: {
      /* 编辑器的内容 */
      value: {
        type: String,
        default: "",
      },
      /* 高度 */
      height: {
        type: Number,
        default: 500,
      },
      /* 是否只读 */
      readOnly: {
        type: Boolean,
        default: false
      },
      /* 编辑器内提示语 */
      placeholder: {
        type: String,
        default: '请输入内容...'
      }
    },
    data() {
      return {
        editor: null,
        html: '',
        toolbarConfig: {
          modalAppendToBody: false,
          toolbarKeys: ['headerSelect', 'blockquote', '|', 'bold', 'underline', 'italic', 'through', 'code', 'sup', 'sub',
            'clearStyle', '|', 'color', 'bgColor', 'fontSize', 'lineHeight', '|', 'bulletedList', 'numberedList', 'todo',
            {
              'key': 'group-justify',
              'title': '对齐',
              'iconSvg': '<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>',
              'menuKeys': ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
            },
            {
              'key': 'group-indent',
              'title': '缩进',
              'iconSvg': '<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>',
              'menuKeys': ['indent', 'delIndent']
            },
            '|', 'insertLink', 'uploadImage', 'insertTable', 'codeBlock', 'divider', '|', 'undo', 'redo', '|', '|', 'fullScreen'
          ],
          // excludeKeys: ['fontFamily', 'emotion', 'group-video']
          insertKeys: {
            index: 32,
            keys: ['wordImport']
          }
        },
        editorConfig: {
          placeholder: this.placeholder,
          readOnly: this.readOnly,
          autoFocus: true,
          MENU_CONF: {
            'uploadImage': {
              timeout: 300000,
              fieldName: 'files',
              maxNumberOfFiles: 10,
              allowedFileTypes: ['image/jpeg', 'image/png'],
              // allowedFileTypes: ['image/*'],
              maxFileSize: 1024 * 1024 * 5,
              server: process.env.VUE_APP_BASE_API + '/system/fileStorage/uploadPic',
              onError: (e, t, n) => {
                this.$message.error('图片上传失败：' + t);
              },
              onFailed: (e, t) => {
                this.$message.error('图片上传失败：未知错误');
              },
              onSuccess: (e, t) => {
                this.$message.success('图片上传成功');
              },
              customInsert(resp, insertFn) {
                insertFn(process.env.VUE_APP_BASE_API + resp.data.url, '', '');
              }
            }
          }
        },
        mode: 'default'
      }
    },
    computed: {
      editorStyle() {
        return 'overflow-y: hidden;height: ' + this.height + 'px;';
      }
    },
    watch: {
      value: {
        handler(val) {
          if (val !== this.html) {
            this.html = val === null ? "" : val;
          }
        },
        immediate: true,
      },
      readOnly: {
        handler(flag) {
          if (this.editor !== null) {
            if (flag) {
              this.editor.disable();
            } else {
              this.editor.enable();
            }
          }
        }
      }
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor);
        console.log('editor.getConfig()', editor.getConfig())
        console.log('editor.getAllMenuKeys()', editor.getAllMenuKeys())
        console.log('editor.getConfig().hoverbarKeys', editor.getConfig().hoverbarKeys)
        console.log('editor.getMenuConfig(uploadImage)', editor.getMenuConfig('uploadImage'))
      },
      onChange(editor) {
        console.log('toolbar.getConfig().toolbarKeys', DomEditor.getToolbar(editor).getConfig().toolbarKeys)
        console.log('editor.children ', editor.children)
        this.$emit('onChange', {editor: editor, html: editor.getHtml(), text: editor.getText()});
      },
      customPaste(editor, event, callback) {
        console.log('ClipboardEvent 粘贴事件对象', event)
        // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
        // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
        // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

        // 自定义插入内容
        // editor.insertText('xxx')

        // 返回 false ，阻止默认粘贴行为
        // event.preventDefault()
        // callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

        // 返回 true ，继续默认的粘贴行为
        // callback(true)
      },
      base64ToBlob(imageType, imageBuffer) {
        let byteCharacters = atob(imageBuffer);
        let byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        let byteArray = new Uint8Array(byteNumbers);
        let blob = new Blob([byteArray], {type: imageType});
        let imageName = 'e' + new Date().getTime();
        return new File([blob], imageName, {type: imageType});
      }
    },
    mounted() {
      document.getElementById("weWordBtn").addEventListener("change", (event) => {
        let requestLoading = Loading.service({
          fullscreen: true,
          text: 'word解析中......',
          spinner: 'el-icon-loading',
          background: 'rgba(217,217,217,0.2)'
        });

        let editorObj = this.editor;
        let _this = this;
        if (event.target.files && event.target.files.length > 0) {
          let file = event.target.files[0];
          mammoth.convertToHtml({arrayBuffer: file.arrayBuffer()}, {
            ignoreEmptyParagraphs: true,
            transformDocument: mammoth.transforms.paragraph((element) => {
              console.log('element', element)
              if (element.styleName === null) {
                if (element.children && element.children.length > 0) {
                  for (let i = 0; i < element.children.length; i++) {
                    let secondChild = element.children[i];
                    if (secondChild.type === 'hyperlink') {
                      secondChild.targetFrame = '_blank';
                    } else if (secondChild.type === 'run') {
                      if (secondChild.children && secondChild.children.length > 0) {
                        if (i === 0 && secondChild.children[0].type === 'text') {
                          let originVal = secondChild.children[0].value;
                          secondChild.children[0].value = '        ' + originVal;
                        }
                        if (secondChild.highlight !== null) {
                          secondChild.style = 'background-color: ' + secondChild.highlight + ';';
                          for (let j = 0; j < secondChild.children.length; j++) {
                            let thirdChild = secondChild.children[j];
                            thirdChild.style = 'background-color: ' + secondChild.highlight + ';';
                          }
                        }
                      }
                    } else {

                    }
                  }
                }
              }
              return element;
            }),
            styleMap: ["u => u"],
            convertImage: mammoth.images.imgElement(function (image) {
              return image.read('base64').then(async (imageBuffer) => {
                //本地图片上传至服务器
                let result = '';
                let imgFile = _this.base64ToBlob(image.contentType, imageBuffer);
                let formData = new FormData();
                formData.append('files', imgFile);
                await uploadPic(formData).then(resp => {
                  if (resp.code === '200') {
                    result = process.env.VUE_APP_BASE_API + resp.data.url;
                  }
                }).catch(e => {
                  console.error('uploadPic-error : ', e)
                });

                return {src: result}
              });
            })
          }).then(function (result) {
            console.log('result', result)
            if (result.messages.length > 0) {
              _this.$message.warning('发生错误：' + result.messages[0].message);
            } else {
              if (editorObj !== null) {
                editorObj.clear();
                editorObj.dangerouslyInsertHtml(result.value);
              }
            }
            requestLoading.close();
          }).catch(function (error) {
            console.error(error);
            requestLoading.close()
          });
        }
      });
    },
    beforeDestroy() {
      if (this.editor !== null) {
        this.editor.destroy();
      }
    }
  });
</script>

<style scoped>
</style>

Test.vue：

<template>
  <div>
    <h1 style="text-align: center">editor测试</h1>
    <div style="width: 80%;margin: 0 auto;">
      <editor :value="editorHtml" :height="450" :readOnly="readOnly" @onChange="onChange"/>
      <div class="test_count">
        <span>{{editorCount}}&nbsp;字</span>
      </div>
    </div>
    <div style="text-align: center;margin-top: 25px;">
      <el-button type="primary" @click="control">{{controlText}}</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import Editor from './editor';

  export default {
    name: "Test",
    components: {Editor},
    data() {
      return {
        readOnly: false,
        controlText: '禁用',
        editorHtml: '',
        editorText: ''
      }
    },
    computed: {
      editorCount() {
        return this.editorText.replace(/\s*/g, "").replace(/\n/g, "").length;
      }
    },
    mounted() {
    },
    methods: {
      onChange(data) {
        if (data.html !== this.editorHtml) {
          this.editorHtml = data.html;
          this.editorText = data.text;
        }
      },
      control() {
        this.readOnly = !this.readOnly;
        if (this.readOnly) {
          this.controlText = '启用';
        } else {
          this.controlText = '禁用';
        }
      },
      submit() {
        console.log('editorHtml', this.editorHtml)
        console.log('editorText', this.editorText)
      }
    },
  };
</script>
<style scoped>
  .test_count {
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
    border: 1px solid #ccc;
    border-top: none;
  }
</style>

页面效果：