tinyMce 集成 word 导入

背景：tinyMce 中文官网提供的 importword 不支持 tinyMce6 以上的版本，那要怎么导入 word 并解析呢？答案是利用 mammoth！

思路：设置一个自定义的按钮，用户点击按钮时触发上传，然后利用 mammoth 解析。

1. 安装 mammoth

 npm install --save mammoth

2. 引入

import mammoth from "mammoth";

3. 在 tinyMce 的 init 中：

  setup: function (editor) {
    // 注册自定义按钮
    editor.ui.registry.addButton('customUploadBtn', {
      text: 'word',
      tooltip: '解析docx文件',
      onAction: function () {
        var input = document.createElement('input');
        input.type = 'file';
        input.type = 'file';
        input.accept = '.doc,.docx';
        // 执行上传文件操作
        input.addEventListener("change", handleFileSelect, false);

        //获取上传文件base64数据
        function arrayBufferToBase64(arrayBuffer) {
          var binary = '';
          var bytes = new Uint8Array(arrayBuffer);
          var len = bytes.byteLength;
          for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          return window.btoa(binary);
        }

        function handleFileSelect(event) {
          var file = event.target.files[0];
          //获取上传文件后缀，如果是docx格式，则使用mammoth来进行解析，
          //如果不是则访问后台，将文件传输流base64传递到后台
          //生成文件，然后用java解析doc，并返回到前台
          var extension = file.name.slice((file.name.lastIndexOf(".") - 1 >>> 0) + 2);
          if (extension === 'docx') {
            readFileInputEventAsArrayBuffer(event, function (arrayBuffer) {
              var base64Data = arrayBufferToBase64(arrayBuffer);
              console.log(base64Data);
              mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
                  .then(displayResult, function (error) {
                    console.error(error);
                  });
            });
          } else if(extension === 'doc') {
            readFileInputEventAsArrayBuffer(event, function (arrayBuffer) {
              //base64文件流
              var base64Data = arrayBufferToBase64(arrayBuffer);
              var result ="后台请求";
              alert(result);
              console.log(base64Data);
            });
            //tinymce的set方法将内容添加到编辑器中
            tinymce.activeEditor.setContent(result);
          }
        }

        function displayResult(result) {
          //tinymce的set方法将内容添加到编辑器中
          tinymce.activeEditor.setContent(result.value);
        }

        function readFileInputEventAsArrayBuffer(event, callback) {
          var file = event.target.files[0];
          var reader = new FileReader();
          reader.onload = function (loadEvent) {
            var arrayBuffer = loadEvent.target.result;
            callback(arrayBuffer);
          };
          reader.readAsArrayBuffer(file);
        }

        // 触发点击事件，打开选择文件的对话框
        input.click();
      }
    });
  }

4. 在 plugins 和 toolbar 中注册自定义按钮 customUploadBtn 。

5. 效果图：编辑器中的内容即解析的内容。但是一些复杂的内容是解析不出来的，比如数学公式、图表...

6. 遇到的问题：遇到一些诸如 path、util 等无法解析的问题。

（1）module not found: Error: Can't resolve 'util' in 'xxx'

解决：npm install util

（2）module not found: error: can't resolve 'path' in 'xxx'

解决：npm i path-browserify

        然后在 vue.config.js 中配置：

 configureWebpack: {
    resolve: {
      fallback: {
        path: require.resolve('path-browserify'),
      },
    },
  },

参考：tinymce编辑器导入docx、doc格式Word文档完整版_tinymce导入word-CSDN博客