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.youkuaiyun.com/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.