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
        // },
posted @ 2023-04-14 11:10  huihuihero  阅读(1170)  评论(0编辑  收藏  举报