一、为什么需要使用filterRules
在使用富文本编辑器ueditor的时候,有时候需要控制内容,例如:不允许带链接、不允许插入图片、控制内部html的样式等等,除了设置toolbars之外,还要保证粘贴到编辑器里面的内容也能被控制,这时就需要用到filterRules属性了。
二、如何使用filterRules
ueditor在网站上提供了这样的功能演示,在http://ueditor.baidu.com/website/examples/里提供了ueditor的一些高级使用演示。打开页面的过滤规则定制化链接,按F12查看源代码,看看百度的示例是怎么写的:
UE.getEditor('editor', {
serverUrl: '/server/ueditor/controller.php',
filterRules: function () {
return{
span:function(node){
if(/Wingdings|Symbol/.test(node.getStyle('font-family'))){
return true;
}else{
node.parentNode.removeChild(node,true)
}
},
p: function(node){
var listTag;
if(node.getAttr('class') == 'MsoListParagraph'){
listTag = 'MsoListParagraph'
}
node.setAttr();
if(listTag){
node.setAttr('class','MsoListParagraph')
}
if(!node.firstChild()){
node.innerHTML(UE.browser.ie ? ' ' : '<br>')
}
},
div: function (node) {
var tmpNode, p = UE.uNode.createElement('p');
while (tmpNode = node.firstChild()) {
if (tmpNode.type == 'text' || !UE.dom.dtd.$block[tmpNode.tagName]) {
p.appendChild(tmpNode);
} else {
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
p = UE.uNode.createElement('p');
} else {
node.parentNode.insertBefore(tmpNode, node);
}
}
}
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
}
node.parentNode.removeChild(node);
},
//$:{}表示不保留任何属性
br: {$: {}},
// a: function (node) {
// if(!node.firstChild()){
// node.parentNode.removeChild(node);
// return;
// }
// node.setAttr();
// node.setAttr('href', '#')
// },
// strong: {$: {}},
// b:function(node){
// node.tagName = 'strong'
// },
// i:function(node){
// node.tagName = 'em'
// },
// em: {$: {}},
// img: function (node) {
// var src = node.getAttr('src');
// node.setAttr();
// node.setAttr({'src':src})
// },
ol:{$: {}},
ul: {$: {}},
dl:function(node){
node.tagName = 'ul';
node.setAttr()
},
dt:function(node){
node.tagName = 'li';
node.setAttr()
},
dd:function(node){
node.tagName = 'li';
node.setAttr()
},
li: function (node) {
var className = node.getAttr('class');
if (!className || !/list\-/.test(className)) {
node.setAttr()
}
var tmpNodes = node.getNodesByTagName('ol ul');
UE.utils.each(tmpNodes,function(n){
node.parentNode.insertAfter(n,node);
})
},
table: function (node) {
UE.utils.each(node.getNodesByTagName('table'), function (t) {
UE.utils.each(t.getNodesByTagName('tr'), function (tr) {
var p = UE.uNode.createElement('p'), child, html = [];
while (child = tr.firstChild()) {
html.push(child.innerHTML());
tr.removeChild(child);
}
p.innerHTML(html.join(' '));
t.parentNode.insertBefore(p, t);
})
t.parentNode.removeChild(t)
});
var val = node.getAttr('width');
node.setAttr();
if (val) {
node.setAttr('width', val);
}
},
tbody: {$: {}},
caption: {$: {}},
th: {$: {}},
td: {$: {valign: 1, align: 1,rowspan:1,colspan:1,width:1,height:1}},
tr: {$: {}},
h3: {$: {}},
h2: {$: {}},
//黑名单,以下标签及其子节点都会被过滤掉
'-': 'script style meta iframe embed object'
}
}()
});
filterRules的属性是一个函数,返回了内容节点的过滤规则,过滤规则也是函数,提供对应的节点参数node,例如:
span:function(node){
if(/Wingdings|Symbol/.test(node.getStyle('font-family'))){
return true;
}else{
node.parentNode.removeChild(node,true)
}
}
这样一来,我们就可以使用filterRules来编写符合自己需求的过滤规则了。