首页 > 其他分享 >tinymce 复制粘贴时去除文本里面的样式

tinymce 复制粘贴时去除文本里面的样式

时间:2023-04-19 16:03:16浏览次数:32  
标签:styles paste tinymce remove 复制粘贴 plugins 文本 true

第一步需要引入tinymce自带的一个粘贴插件"paste",代码如下;
import "tinymce/plugins/paste";
tinymce.init({
...其他配置,
plugins: ["paste"],
});

第二步将以下几个参数放到配置项中,亲测这些参数都有效,比如从excel表格中复制过来的内容可以清除table样式。
import "tinymce/plugins/paste";
tinymce.init({
...其他配置,
plugins: ["paste"],
paste_auto_cleanup_on_paste: true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
paste_as_text: true,
});

第三步,如果以上参数还不满足需求,例如需要将一下特殊的标签删掉或者替换一下,此时需要有一个类似于拦截器的存在来处理一下,paste插件提供了这样的函数,代码如下;
import "tinymce/plugins/paste";
tinymce.init({
...其他配置,
plugins: ["paste"],
paste_auto_cleanup_on_paste: true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
paste_as_text: true,
paste_postprocess: async function (plugin, args) {
// args.node可以获取到粘贴过来的所有dom节点,直接可以用操作dom的方式取修改它
// 注意此函数不需要return返回值,直接修改即可
console.log("复制粘贴paste_postprocess", args.node);
console.log(args.node.childNodes);
}
});

标签:styles,paste,tinymce,remove,复制粘贴,plugins,文本,true
From: https://www.cnblogs.com/web-chuanfa/p/17333593.html

相关文章

  • vue利用正则去除富文本的标签和样式
    constremoveHtmlStyle=(html:any)=>{letrelStyle=/style\s*?=\s*?([‘"])[\s\S]*?\1/g;//去除样式letrelTag=/<.+?>/g;//去除标签letrelClass=/class\s*?=\s*?([‘"])[\s\S]*?\1/g;//清除类名letnewHtml="";  if(html){......
  • 论文阅读记录3——基于提示学习的小样本文本分类方法——计算机应用
     方法:首先,利用预训练模型BERT在标注样本上学习到最优的提示模板;然后,在每条样本中补充提示模板和空缺,将文本分类任务转化为完形填空任务;最后,通过预测空缺位置的填充词,结合填充词与标签之间的映射关系得到最终的标签。原因:文本分类任务通常依赖足量的标注数据,针对低资源场景......
  • css文本
    1、colorcolor:red;设置字体颜色2、text-aligntext-align:center;设置文本的水平对齐方式,可选项:center居中对齐,right向右对齐,left向左对齐,justify两端对齐3、文本修饰text-decoration:none;可选项:overline上划线,line-through删除线,underline下划线,none没有4、大小......
  • python+playwright 学习-53 模拟键盘操作-复制粘贴相关
    前言playwright可以模拟键盘操作,定位到元素使用press()方法press()方法介绍locator.press()方法聚焦所选元素并产生单个击键。它接受在键盘事件的keyboardEvent.key属性中发出的逻辑键名称:Backquote,Minus,Equal,Backslash,Backspace,Tab,Delete,Escape,ArrowDown,......
  • 如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中
    如果你想用TinyMCE来修改你之前写的文章那么你需要将源代码放到TinyMCE中,如果服务器把HTML源码发给我们可是我们应该怎样调用?方法为使用 tinymce.activeEditor.setContent()这个函数具体用法为:tinymce.activeEditor.setContent()//设置TinyMCE编辑器里的内容源代码tin......
  • TinyMCE上传图片后端处理写法
    写法有两种,一种是先把图片转换成base64后再本地解析显示,这样可以直接将图片储存在HTML文件中,如果图片过多可能会让HTML文件过大,或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png格式。另一种是方法是通过POST把图片传输给服务器后,服务器再返回图片地址......
  • 批量爬取TXT文本
    importreimportos #导入模块importthreadingimportpymysql#连接数据框,创建表db=pymysql.connect(host='localhost',user='root',password='1234',database='旅游�......
  • 文本编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片
    ​ 当前功能基于PHP,其它语言流程大抵相同。大概流程:1.将docx文件上传到服务器中2.使用PHPoffice/PHPword实现将word转换为HTML3.将HTML代码返回并赋值到编辑器中 1编辑器配置修改1.1新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /*......
  • Linux-文本编辑vim
    vim使用流程vim默认机器是不安装的,需要手动安装这个工具命令yuminstallvim-y #通过yum软件管理工具进行安装当vim打开不存在的文件的时候,默认会创建文件语法1.vim文件名2.输入字母i,进入编辑模式,代表insert输入字母o,在光标下一行开始编辑3.写完代码......
  • 初探富文本之OT协同算法
    初探富文本之OT协同算法OT的英文全称是OperationalTransformation,是一种处理协同编辑的算法。当前OT算法用的比较多的地方就是富文本编辑器领域了,常用于作为实现文档协同的底层算法,支持多个用户同时编辑文档,不会因为用户并发修改导致冲突,而导致结果不一致甚至数据丢失的问题。描述......