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
// },