最近遇到需要将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 粘贴过滤问题的更多相关文章

  1. JSP嵌入ueditor、umeditor富文本编辑器

    一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...

  2. umeditor+粘贴word图片

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  3. ueditor 百度编辑器 粘贴的table表格样式边线

    粘贴html的table表格会有间隔大,黑色边线,可以在: ueditor.all.js 里 找到以下处,修改里面的样式即可 me.ready(function () { utils.cssRule( ...

  4. ueditor div style被过滤 解决办法

    上周开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结. 1. UEditor样式被过滤无法显示 ...

  5. ueditor从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  6. ueditor从excel粘贴过来的表格不显示问题

    这是设置表格边框可见的办法

  7. jsp+ ueditor word粘贴上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  8. php+ ueditor word粘贴上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  9. asp.net+ueditor word粘贴上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

随机推荐

  1. httpd2.2配置文件详解

    httpd2.2官方配置手册:http://httpd.apache.org/docs/2.2/ 注意:关闭防火墙,iptables规则 vim /etc/sysconfig/selinux SELI ...

  2. Sum It Up 广搜

    Sum It Up Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  3. S2_SQL_第二章

    第二章:初始mySql 2.1:mySql简介 2.1.2:mysql的优势 运行速度块,体积小,命令执行的块 使用成本低,开源的 容易使用 可移植性强 2.2:mysql的配置 2.2.1:端口配置 ...

  4. 斐波那契数列第N项f(N)[矩阵快速幂]

    矩阵快速幂 定义矩阵A(m*n),B(p*q),A*B有意义当且仅当n=p.即A的列数等于B的行数. 且C=A*B,C(m*q). 例如: 进入正题,由于现在全国卷高考不考矩阵,也没多大了解.因为遇到 ...

  5. mysql-5.7.17-winx64解压版本安装图解附带一些常见问题

    第一步:下载mysql-5.7.17-winx64解压版本:http://dev.mysql.com/downloads/mysql/ 第二步:解压到安装目录,如:D:\MySql\mysql-5.7 ...

  6. Mysql主从复制原理及配置

    Mysql主从复制原理及配置 1.复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其 ...

  7. java关于随机数和方法重构

    1.生成随机数 源代码 package Zuote; public class SuiJiShu { public static void main( String args[] ) { java.u ...

  8. gulp使用1-入门指南

    入门指南 1. 全局安装 gulp: $ npm install --global gulp 或使用cnpm 2. 作为项目的开发依赖(devDependencies)安装: $ npm instal ...

  9. 如何结合场景利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  10. 【特效】单选按钮和复选框的美化(只用css)

    表单的默认样式都是比较朴素的,实际页面中往往需要美化他们.这里先说说单选按钮和复选框,有了css3,这个问题就变的好解决了.利用input与label相关联,对label进行美化并使其覆盖掉原本的in ...