UEditor过滤粘贴板格式

2019-07-02 本文已影响0人 Yuhoo

写在前面
最近接了一个后台管理系统的需求，需求描述是富文本编辑器仅保留：加粗/加斜/下划线/删除线/居中/居左/居右这几个按钮，而且粘贴过来的内容自动过滤掉除以上格式的样式，图片、链接等直接删除。

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(/(&nbsp;)+/i, '&nbsp;');
    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': { '$': {} },
  }
}()
...

结果图