ueditor 和 umeditor 粘贴过滤问题
最近遇到需要将WORD WPS等复制的带有格式的内容粘贴到富文本编辑器里面去掉冗余的HTML,只保留最有用的部分。
第一步肯定是先查官方文档了。
http://fex.baidu.com/ueditor/#start-config
里面的filterTxtRules {Object} //纯文本粘贴模式下的过滤规则
就是对粘贴的纯文本进行过滤。 当然在ueditor中还带有两个自带的参数
retainOnlyLabelPasted 和 pasteplain 也可以对粘贴的内容直接进行过滤。 当然想要自定义过滤还是需要自己来写。 那就是强大的 filterTxtRules 了。
下面是官方示例:
/默认值:
function() {
function transP(node) {
node.tagName = 'p';
node.setStyle();
}
return {
//直接删除及其字节点内容
'-': 'script style object iframe embed input select',
'p': {
$: {}
},
'br': {
$: {}
},
'div': {
'$': {}
},
'li': {
'$': {}
},
'caption': transP,
'th': transP,
'tr': transP,
'h1': transP,
'h2': transP,
'h3': transP,
'h4': transP,
'h5': transP,
'h6': transP,
'td': function(node) {
//没有内容的td直接删掉
var txt = !! node.innerText();
if (txt) {
node.parentNode.insertAfter(UE.uNode.createText(' '), node);
}
node.parentNode.removeChild(node, node.innerText())
}
}
}()
但是因为使用的是轻量级的UMEditor,所以并没有retainOnlyLabelPasted 和 pasteplain这两个技能,只能使用自定义的部分。但是又想保留部分标签的格式,那么具体的要求就是允许 span标签和p标签使用 class以及br换行,下面直接上代码,前端的同学一看就懂。记录一下,方便以后用到。
,filterRules: function() {
function transP(node) {
node.tagName = 'p';
node.setStyle();
}
return {
//直接删除及其字节点内容
'-': 'script style object iframe embed input select',
'p': {
$ : {'class':1}
},
'br': {
$: {}
},
'div': {
'$': {}
},
'li': {
'$': {}
},
'span' : {
$ : {'class':1, 'style':1}
},
'caption': transP,
'th': transP,
'tr': transP,
'h1': transP,
'h2': transP,
'h3': transP,
'h4': transP,
'h5': transP,
'h6': transP,
'td': function(node) {
//没有内容的td直接删掉
var txt = !! node.innerText();
if (txt) {
node.parentNode.insertAfter(UE.uNode.createText(' '), node);
}
node.parentNode.removeChild(node, node.innerText())
}
}
}()
OK, Done !
ueditor 和 umeditor 粘贴过滤问题的更多相关文章
- JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
- umeditor+粘贴word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- ueditor 百度编辑器 粘贴的table表格样式边线
粘贴html的table表格会有间隔大,黑色边线,可以在: ueditor.all.js 里 找到以下处,修改里面的样式即可 me.ready(function () { utils.cssRule( ...
- ueditor div style被过滤 解决办法
上周开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结. 1. UEditor样式被过滤无法显示 ...
- ueditor从word粘贴公式
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- ueditor从excel粘贴过来的表格不显示问题
这是设置表格边框可见的办法
- jsp+ ueditor word粘贴上传
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- php+ ueditor word粘贴上传
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- asp.net+ueditor word粘贴上传
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
随机推荐
- Codeforces 858A. k-rounding 数论
题目: 题意:输入n和k,找到一个最小的数,满足末尾有至少k个0和是n的倍数. 最小的情况 ans = n,最大的情况 ans = n*pow(10,k). 令 k = pow(10,k); 我们发现 ...
- android-蓝牙通信
一:简介 由于项目曾经想用蓝牙通信,但由于蓝牙传输速度比较慢,最终还是没有使用蓝牙,不过还是在空闲之余研究了蓝牙通信,鉴于目前网上蓝牙这块教程并不多,尤其是从蓝牙扫描,蓝牙配对,蓝牙通信等完整的教程更 ...
- Eight hdu 1043 八数码问题 双搜
Eight Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 认识jQuery的Promise
先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <script> var defer = $ ...
- Fitnesse - Slim Tables
Fitnesse - Slim Tables 2017-09-28 目录1 什么是Wiki Word?2 Query Table 2.1 Query Table的格式 2.2 源代码3 Scri ...
- 安装CentOS7精简版后的配置工作
CentOS7完整版有7.7G,太大了下载起来比较费劲,还是下载了精简版,但是精简版安装以后很多命令都没有,还要动手配yum源,按需安装 国内的yum源比较好的就是163的了,配置方法: 1,进入yu ...
- ICommand.CanExecuteChanged事件订阅对象的变化
public class DelegateCommand : ICommand { Func<object, bool> canExecute; Action<object> ...
- zabbix基本操作
zabbix基本操作 ---- 2016年终总结 二 包括的内容: 添加主机 查看监控数据 添加监控项 创建触发器 创建模版 添加报警 添加媒介 添加主机 进入页面 点击Configuration(大 ...
- windows下Maven的安装与配置
1 安装maven前首先确认计算机已正确安装JDK2 下载maven 地址:http://maven.apache.org/download.html安装文件格式如下:apache-maven-3.0 ...
- MySQL(十三)之MySQL事务
前言 这段时间自己会把之前学的东西都总结一遍,希望对自己以后的工作中有帮助.其实现在每天的状态都是很累的,但是我要坚持! 进入我们今天的正题: 为什么MySQL要 有事务呢?事务到底是用来干什么的?我 ...