526互联

tinymce来自word文档粘贴的优化

发布时间 2023-04-14 11:11:39作者: huihuihero

前提条件

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