tinymce富文本,如何保留从word中粘贴的内容格式(vue2后台项目)
今天办公室里弥漫着一股“岁月静好”的错觉,键盘声稀疏得像老式挂钟的滴答声,同事们或对着屏幕发呆,或偷偷刷着手机,连平日里最爱唠嗑的行政小妹都安静地整理着文件。我端着刚泡好的枸杞茶,美滋滋地往转椅上一靠,心想:“嘿,这难得的清闲时光,正好能把之前积压的Tinymce技术文档啃一啃,说不定还能解锁几个新技能,在下次技术分享会上装个大神呢!”
可这平静就像肥皂泡,“啵”地一下就破了。部门组长风风火火地拎着公文包出门,说是要去客户那儿演示项目,临走还特意拍了拍我的肩膀,那眼神仿佛在说:“小子,给我盯紧了!”他前脚刚跨出公司大门,我手机微信群就“叮”地弹出个@我的小红点,那动静在安静的办公室里格外刺耳,我心里“咯噔”一下,暗叫不好——这平静的湖面算是被投了颗大石头,指定要起波澜了。
点开消息一看,果然是技术群里小王火急火燎甩过来的需求:“大佬,Tinymce富文本粘贴Word内容,格式全乱套了!客户要求必须能直接导入且保留原格式,这可是给政府部门做的项目,格式要求严得跟故宫的城墙似的,一点差错都不能有啊!”我盯着屏幕,脑袋“嗡”地一下就大了。这政府部门的项目,那格式要求,就像古代皇帝的圣旨,字号、字体、行距、缩进,哪个环节出问题,都可能被客户挑刺儿,到时候可就麻烦大了。
我皱着眉头,努力回想之前的项目经历。好像还真遇到过类似的问题,当时大家围在一起,七嘴八舌地讨论了半天,各种方法都试了个遍,可最后效果都不尽如人意。后来这事儿是怎么解决的?我拍了拍脑袋,怎么也想不起来了,只记得当时大家一个个都愁眉苦脸的,像霜打的茄子。
没办法,既然想不起来,那就只能自己动手丰衣足食了。我深吸一口气,打开搜索引擎,输入“Tinymce导入Word保留格式”,眼睛紧紧盯着屏幕,手指在鼠标上不停地点击,就像在茫茫大海里寻找救命稻草一样。经过一番折腾,我发现可以通过安装importword插件来实现。以下是一个在VUE-cli中使用Tinymce并配置importword插件的示例代码:
import Editor from '@tinymce/tinymce-vue'; import 'tinymce/plugins/importword'; // 引入importword插件 export default { components: { Editor }, data() { return { content: '', editorInit: { height: 500, plugins: 'importword', // 启用插件 toolbar: 'importword', // 添加插件按钮到工具栏 // 其他配置项... } }; } };希望这次能顺利解决问题,不然我这“技术大神”的名号可就要不保啦!
资料搜索
1、通过插入 word 文档
后续核实后,还是不能解决这个问题(不能保留粘贴的格式)。而且还多了操作步骤。
2 使用插件。
问题解决
点击这里查看
后来发现,起始 tinymce 的经典模式,就可以解决这个问题。可以保留从word中粘贴内容的格式。
按照tinymce 的经典模式,效果图。