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 !