首页 > 其他分享 >tinymce来自word文档粘贴的优化

tinymce来自word文档粘贴的优化

时间:2023-04-14 11:11:10浏览次数:31  
标签:word args tinymce 编辑器 文档 paste 粘贴

前提条件

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) {
                return Math.abs(Math.round(parseInt(group0, 10) * 96 / 72)) +"px";
            })
        },
        // paste_postprocess: function(plugin, args) {  // 从Word粘贴过来时,被插入到编辑器之前的解析后的DOM结构
        //     // let theNode = args.node
        // },

标签:word,args,tinymce,编辑器,文档,paste,粘贴
From: https://www.cnblogs.com/huihuihero/p/17317712.html

相关文章

  • HDU 1116 && POJ 1386 Play on Words(欧拉路径)
    按字母来建边,每个单词的首字母和尾字母加边。先判断是否连通,然后判断每个字母的入度和出度不能出现差的绝对值大于2,然后入度和出度差的绝对值为1的不能超过两个。就可以形成欧拉路径代码如下:#include<iostream>#include<string.h>#include<math.h>#include<queue>#include......
  • HDU 2222 Keywords Search (AC自动机)
    题目地址:HDU2222AC自动机第一发!真好奇这些算法是怎么被发明的。。算法的魅力真是无穷。这题是AC自动机模板题。自己实在写不出来,比着kuangbin的模板写的==代码如下:#include<iostream>#include<string.h>#include<math.h>#include<queue>#include<algorithm>#incl......
  • 【element-ui】解决textarea show-word-limit挡住文字问题
    问题:“67/500”默认背景为白色已超出文本输入框,遮住部分上border,当文字到达右侧时会遮住部分文字,且无法点击该部分解决方案:背景透明色,文字放到右下角 html:<el-inputtype="textarea"autosize maxlength="500"show-word-limit v-model="form.keyIndustry"placeh......
  • CKEditor粘贴图片自动上传到服务器(C#版)
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • CKEditor粘贴图片自动上传到服务器(VUE版)
    ​ 由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解......
  • 支持WPS的高效率插件,Word魔方
    个人办公中,使用插件越来越是很多人的选择。利用插件高效率完成繁琐的工作,能大大节省时间。下面就给大家介绍一款Word中的高效率插件,Word魔方。插件截图如下:  插件包含100+强大功能。一键AI智能排版、批量合并文档、批量拆分文档、批量提取Word数据到Excel、批量插入首页封......
  • 开发GPT知识库功能时,需要上传word文档让知识库向量化,Golang读取word文档功能
    开发GPT知识库功能时,需要上传word文档让知识库向量化,Golang读取word文档功能。找到一个开源库baliance.com/gooxml/document,但是只支持docx后缀,下面是使用方法import("baliance.com/gooxml/document")funcReadDocxAll(fileNamestring)(string,error){doc,e......
  • 百度编辑器粘贴图片自动上传到服务器(Java版)
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • 如何解决更新WordPress需要访问您网页服务器的权限
    今天更新wordpress版本时网站后台提示“要执行请求的操作,WordPress需要访问您网页服务器的权限”,更新插件也提示,更新主题也提示。后来百度查询了一下,找到了解决办法,只需要找到wp-config.php这个文件,在最后面加上如下代码就能解决问题,至于是什么原因造成的并不清楚。define(“FS_......
  • cnetos8上RPM安装mysql8后,修改初始密码提示Your password does not satisfy the curre
    我在修改mysql8初始密码是遇到了Yourpassworddoesnotsatisfythecurrentpolicyrequirements,如果您的mysql版本5.x可能不太合适。下图是我遇到的问题: 意思是,密码不符合密码验证要求。但是mysql8的初始密码连验证要求都查不到,不过一般密码强度是不过我们可以密码设置为......