Tinymce富文本编辑器的改进——支持导入word
前言
《富文本编辑器の逆袭：我让TinyMCE学会了"吃"Word文档！》
（推了推并不存在的眼镜，故作高深地敲了敲键盘）
继上次把TinyMCE折腾得能导出Word之后，我这双"键盘侠"的手又痒了——“要是能反过来把Word塞进编辑器里编辑，那岂不是能少掉90%的格式调整头发？”（摸着日渐稀疏的头顶陷入沉思）
说干就干！我火速冲进GitHub的"魔法商店"，在茫茫插件海洋中捞出了传说中能让TinyMCE"反刍"Word的神秘法宝——importword插件！（插件名被我强行加粗以表尊重）
安装过程那叫一个丝滑——就像给手机装APP似的，三行命令搞定：
npm install tinymce-plugin-importword --save
然后…（神秘兮兮地压低声音）
在配置文件里偷偷加上’importword’这个关键词
重点来了！当我在编辑器工具栏发现那个闪闪发光的"导入Word"按钮时，激动得差点把咖啡泼在键盘上（幸好我手快，咖啡现在还在杯子里瑟瑟发抖）。点击后的效果嘛…（掏出手机翻出测试截图）
“锵锵锵锵！您瞅瞅这效果！”（模仿魔术师甩披风的动作）
原本在Word里摆得整整齐齐的段落
那些让我抓狂的标题层级
连表格里的斜线表头都原样搬过来了！
（突然想到什么似的补充）当然，图片得自己传服务器，毕竟编辑器又不是"魔法口袋"能凭空变出图片链接…
现在每次看到测试组同事对着新功能"哇哦"个不停，我就忍不住想笑——他们哪知道这背后是我和插件文档斗智斗勇了三个通宵的成果啊！（突然捂住嘴）糟糕，说漏嘴了，其实真正通宵的是在调试"为什么导入后字体变宋体了"这种玄学问题…
下载importword插件
插件地址：tinymce-plugins下载插件
点击下载，将解压后的文件夹拷贝至public文件夹下的tinymce文件夹，如下图所示：
代码实现
// 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
