当前位置: 首页 > news >正文

TinyMCE5导入pdf识别图片和图表元素

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

最终效果

http://www.cnnetsun.cn/news/3368.html

相关文章:

  • TinyMCE4支持word粘贴超链接和锚点
  • TinyMCE6粘贴ppt幻灯片转存到网页
  • TinyMCE5粘贴Latex公式到html富文本
  • TinyMCE4支持跨平台ppt音频视频嵌入
  • TinyMCE4支持政府公文word图片转存
  • TinyMCE6处理ppt幻灯片图文混排转存
  • TinyMCE4粘贴微信公众号内容自动排版
  • 中小企也怕 DDoS?低成本高防护的实战攻略来了
  • 从原理到实战:一文读懂 DDoS 防御的核心逻辑
  • 如何建设一个真正高效的智能制造工厂?从零到落地的完整路径
  • 制造智能体如何帮助企业降低废品率?
  • windows录屏软件在精不在多,2025年8个录屏神器有你用过的吗
  • 7 款热门录屏软件深度对比分享:覆盖全场景录制需求
  • Wan2.2-T2V-A14B在农业科技推广视频中的可视化应用
  • 计算机毕业设计|基于springboot + vue健身房管理系统(源码+数据库+文档)
  • 计算机毕业设计|基于springboot + vue非遗传承文化管理系统(源码+数据库+文档)
  • 微信双设备同时登录终极教程:告别单一设备限制
  • Holo1.5开源:AI代理交互能力再突破,38.5%年增长市场迎新引擎
  • QuantConnect量化交易教程:3天掌握专业级算法交易技能
  • 掌握OpenPNM孔隙网络模拟:从入门到精通的多孔介质分析指南
  • YouCompleteMe智能补全插件:让Vim拥有IDE级别的代码补全体验
  • 小兔鲜儿微信小程序开发全攻略:基于uniapp和Vue3的电商项目实战
  • Patroni高可用性部署完整指南:从零构建PostgreSQL集群
  • 为什么你需要立即卸载OneDrive?5分钟完成彻底清理的完整方案
  • TradingView数据提取神器:3分钟搞定金融数据收集的完整攻略
  • 终极手机投屏解决方案:3步实现跨设备无缝控制
  • downkyicore下载路径终极指南:快速定位你的视频文件
  • 分布式训练终极指南:架构演进与性能突破深度解析
  • 网易云音乐NCM文件格式转换工具完全使用手册
  • Sketch MeaXure终极指南:从零开始掌握设计标注神器