写在前面
最近接了一个后台管理系统的需求，需求描述是富文本编辑器仅保留：加粗/加斜/下划线/删除线/居中/居左/居右这几个按钮，而且粘贴过来的内容自动过滤掉除以上格式的样式，图片、链接等直接删除。
UEditor部署
下载UEditor源码，解压后创建html文件，代码如下
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="ueditor.config.js"></script><!-- 配置文件 -->
<script type="text/javascript" src="ueditor.all.js"></script><!-- 编辑器源码文件 -->
<script type="text/javascript">
var ue = UE.getEditor('container'); // 实例化编辑器
</script>
</body>
</html>
UEditor定制工具栏图标
在ueditor.config.js中可以使用官网接口对工具栏按钮进行自定义配置，隐藏无用的按钮。
根据需求，配置如下
toolbars: [[
'bold ', 'italic ', 'underline', 'strikethrough ', '|' , 'fontsize ', 'forecolor ', '|' ,
'justifyleft', 'justifycenter', 'justifyright', '|', 'link ', 'unlink', '|', 'removeformat', '|'
]]
过滤粘贴板格式
1、了解过滤配置
前端配置选项中有filterTxtRules // 纯文本粘贴模式下的过滤规则，可以自定义粘贴板中内容
2、了解编辑器模拟的节点类uNodeAPI
在过滤规则中不能直接操作dom元素，智能使用uNode类给API才能完成过滤样式操作
| 方法 | 描述 |
|---|---|
| innerHTML() | 获取节点的html内容 |
| innerHTML(String htmlstr) | 设置节点的html内容 |
| removeChild | 从当前节点的子节点列表中，移除节点 |
| getAttr(String attrName) | 获取当前节点所代表的元素属性，即获取attrs对象下的属性值 |
| setAttr(String attrName, * attrVal) | 设置当前节点所代表的元素属性，即设置attrs对象下的属性值 |
| getStyle(String name) | 根据样式名称，获取节点的样式值 |
| setStyle(String name, String val) | 给节点设置样式 |
3、具体实现代码如下
...
,filterTxtRules: function() {
function delDom(node) { // 如果是图片、超链接 直接删除
node.parentNode.removeChild(node, node.innerText())
}
function transP(node) { // 清除样式
var html = node.innerHTML().replace(/( )+/i, ' ');
node.innerHTML(html);
var style = getStyle(node);
node.setAttr('style', style.join(';'));
}
function getStyle(node) { // 保留filterStyle中的样式
var style = [];
var filterStyle = ['font-weight', 'font-style', 'text-decoration', 'color', 'text-align'];
for (var i = 0, len = filterStyle.length; i < len; i++) {
if (node.getStyle(filterStyle[i])) {
style.push(filterStyle[i] + ': ' + node.getStyle(filterStyle[i]));
}
}
return style;
}
return {
// 黑名单，以下标签及其子节点都会被过滤掉
'-': 'script style object iframe embed input select',
'a': delDom, // 直接删除及其字节点内容
'img': delDom,
'p': transP,
'div': transP,
'span': transP,
'h1': transP,
'h2': transP,
'h3': transP,
'h4': transP,
'h5': transP,
'h6': transP,
'b': { '$': {} }, // $:{} 表示不保留任何属性
'br': { '$': {} },
'i': { '$': {} },
'li': { '$': {} },
'td': { '$': {} },
'ul': { '$': {} },
}
}()
...
结果图
网友评论