tinymce来自word文档粘贴的优化
前提条件
src/components/TEditor.vue里,引入自带的paste插件
在配置项(init)里的plugins里添加
paste
关于粘贴图片自动上传
【效果】用户复制一个本地图片或者截图后,在编辑器里粘贴,首先以blob文件流形式展示;
然后执行自动上传到接口,并在拿到图片地址后将blob文件流地址替换成真正的图片地址
【解决】
在配置项(init)里设置
paste_data_images: true, // 粘贴进来的图片自动上传
来自word文档粘贴的样式及格式处理
【效果】从word文档里复制的富文本,往往具有更复杂的结构和样式,以至于编辑器不能很好的处理这些格式和样式。(包括字体设置不生效,样式错位等问题)
这里将word粘贴过来的富文本做一些处理,以达到能让编辑器正常编辑的目的
配置项文档:http://tinymce.ax-z.cn/plugins/paste.php
【解决】
在配置项(init)里设置
paste_merge_formats: true, // 粘贴合并相似格式,例:<b>abc <b>bold</b> 123</b> 转换为 <b>abc bold 123</b>
paste_word_valid_elements: "*[*]", // 从Word粘贴过来时,不会对此处配置的内容进行过滤(需要paste_enable_default_filters为true才生效)
paste_retain_style_properties: "all", // 从Word粘贴过来时,将保留此处配置的样式
paste_webkit_styles: "all", // 在WebKit中粘贴时,将保留此处配置的样式
paste_preprocess: function(plugin, args) { // 从Word粘贴过来时,被插入到编辑器之前的文本
args.content = args.content.replace(/([+-]?[0-9]*\.?[0-9]+)pt/g, function(match, group0) { //将pt统一转为px,包括负数值(-10px这种)
return Math.abs(Math.round(parseInt(group0, 10) * 96 / 72)) +"px";
})
},
// paste_postprocess: function(plugin, args) { // 从Word粘贴过来时,被插入到编辑器之前的解析后的DOM结构
// // let theNode = args.node
// },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南