news 2026/4/15 13:11:26

TinyMCE6处理政府公文word图片转存需求

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TinyMCE6处理政府公文word图片转存需求

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

最终效果

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/14 8:55:39

学长亲荐8个AI论文软件,助你轻松搞定本科毕业论文!

学长亲荐8个AI论文软件,助你轻松搞定本科毕业论文! AI 工具如何成为论文写作的得力助手 随着人工智能技术的不断进步,AI 工具在学术写作中的应用越来越广泛。尤其是在本科阶段,面对繁重的论文任务,许多学生开始借助 AI…

作者头像 李华
网站建设 2026/4/11 14:47:13

Array.from() 转换为数组的实际开发场景举例

Array.from() 转换为数组的实际开发场景举例1. DOM操作场景场景1&#xff1a;批量修改元素样式// ❌ 不好的做法&#xff1a;直接操作HTMLCollection let items document.getElementsByClassName(item); for (let i 0; i < items.length; i) {items[i].style.color red; …

作者头像 李华
网站建设 2026/3/31 1:09:24

正规式 `ab*a` 描述的是以 `a` 开头、中间有任意多个 `b`(包括零个)、最后再以 `a` 结尾的字符串,即形如 `aa`, `aba`, `abba`, `abbba`

正规式 ab*a 描述的是以 a 开头、中间有任意多个 b&#xff08;包括零个&#xff09;、最后再以 a 结尾的字符串&#xff0c;即形如 aa, aba, abba, abbba 等。在词法分析中&#xff0c;这类正规式常用于识别特定模式的标识符或关键字结构。 为了将该正规式转化为可执行的自动机…

作者头像 李华
网站建设 2026/4/14 0:01:41

解析GEO:定义、价值与忽视的代价

在数字化时代&#xff0c;地理信息已成为连接虚拟世界与现实场景的关键纽带&#xff0c;而GEO&#xff08;Geographic Information Object&#xff0c;地理信息对象&#xff09;作为地理信息应用的核心载体&#xff0c;正深刻影响着商业运营、公共服务、个人生活等多个领域。不…

作者头像 李华
网站建设 2026/4/13 16:08:50

西门子 PLC_PVC 送料配料系统控制程序画面实例分享

西门子PLC_PVC送料配料系统控制程序画面实例&#xff0c;结构采用S7-314CWincc 程序内容包括1.配料系统物料分配2.模拟量转换&#xff0c;监测压力&#xff0c;称重程序&#xff0c;3.PROFIBUS通讯系统4.配方管理程序块5.变频器&#xff08;1拖6&#xff09;控制 项目包括&…

作者头像 李华
网站建设 2026/4/9 9:31:23

探索FX5U程序框架模板(10轴):开启运动控制新征程

FX5U程序框架模板&#xff08;10轴&#xff09; 程序由老工程师费尽心力的整理&#xff0c;把控制允许整理成简单的模板架构程序。 程序讲解 1 轴的参数初始化 2 自动启动条件 3 安全条件&#xff08;台湾称许可条件&#xff0c;这个可以避免运动打架&#xff0c;很重要&#x…

作者头像 李华