vue2 tinymce实现导入word功能

前言

VUE后台管理有使用富文本编辑器导入word 文档进行编辑的需求
在使用 tinymce-plugin 库中的importword插件，总有各种报错，现在重新通过Mammoth获取word内容，实现导入word编辑的需求。底部有完整代码。

安装

现在TinMCE已经推到了v6版本，兼容Vue3.0X版本，现在我们要说的是Vue2.0X版本和我们的TinyMEC

npm install [email protected] -S
npm install @tinymce/[email protected] -S

安装好后在node_modules里找到这个文件

image.png

将里面你所需要的文件拉到我们本地文件中，Vue2的版本是public，很多的博客的写法是将 node_modules 里面的skins文件夹复制到public/tinymce目录下，经过尝试是不完善的，需要将整个目录倒入进public里。

image.png

tinymce 默认是英文界面，所以还需要下载一个中文包，复制到 public/tinymce/langs目录下

导入tinymcejs

封装组件

自己封装一个组件

页面使用

到这一步已经完成可以用富文本的功能，接下来实现导入word的功能
首先下载依赖

npm install --save mammoth

在富文本的组件中，创建一个上传的组件，

      
        导入
      
    

引入依赖

import "mammoth/mammoth.browser.js";
import Mammoth from "mammoth";

文件上传完之后，转化为html,并把内容传入编辑器中

beforeUpload(file, fileList) {
      const self = this;
      var reader = new FileReader();
      reader.onloadend = function (event) {
        let arrayBuffer = reader.result;
        //将word 转换成html
        const loading = self.$loading({
          lock: true,
          text: '文件解析中....',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        });
        Mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then(function (
          resultObject
        ) {
          // 重要！不适用setTimeout,无法使用
          setTimeout(() => {
            //获取原来编辑器的内容
            let content = tinymce.activeEditor.getContent()+resultObject.value
            tinymce.activeEditor.setContent(content);
            loading.close();
          }, 100);
        });
      };
      reader.readAsArrayBuffer(file);
      return false;
    },

将导入word按钮加入到tinymce的工具栏中,

将以下代码加入到tinymce的init配置信息中

image.png

setup: (editor)=> {
          let _this = this
          editor.ui.registry.addButton("importbtn", {
            text: "导入word",
            // icon:'', // 目前使用文字按钮，如果需要图标展示，根据文档中自定义图标中的内容进行配置
            onAction: function () {
              //触发上传组件
              _this.$refs['fileRefs'].$refs['upload-inner'].handleClick()
            },
          });
        },

效果展示

image.png

image.png

完整代码

组件代码

页面使用