Tinymce富文本编辑器的改进——支持导入word

2,523 阅读1分钟

一、前言

继前面>富文本编辑器的使用2——Tinymce编辑器+导出Word文章关于tinymce的使用,这次对编辑器进行优化与改进,通过安装外部importword插件,使编辑器可以导入word进行编辑,实现效果如下图所示:

企业微信截图_16554338845651.png

二、下载importword插件

插件地址:tinymce-plugins下载插件

企业微信截图_16554324486381.png

点击下载,将解压后的文件夹拷贝至public文件夹下的tinymce文件夹,如下图所示:

企业微信截图_16554327153999.png

三、代码实现

// 1、引入刚刚拷贝importword的文件夹
import "/public/tinymce/importword"
// 2、添加importword至默认工具栏配置即可
// 省略代码...
plugins: {
      //使用的插件 - 根据需求进行删减
      type: [String, Array],
      default:
        "link lists image code table wordcount media fullscreen paste preview importword",
    },
    toolbar: {
      //工具栏 - 根据需求进行删减
      type: [String, Array],
      default:
        "importword | fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat",
    },

四、总结

本篇文章是对前面文章>富文本编辑器的使用2——Tinymce编辑器+导出Word的优化与改进,需在前面代码的基础上进行修改。importword插件的地址需注意引用的是拷贝的importword文件夹地址,和前面引入的tinymce插件方式不一样。^o^