ueditor 和 umeditor 粘贴过滤问题

最新推荐文章于 2022-12-22 17:49:10 发布

转载最新推荐文章于 2022-12-22 17:49:10 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aleafo/p/5360175.html

文章标签：

#前端 #ViewUI

本文详细介绍了如何使用UMEditor的自定义过滤规则功能，仅保留粘贴文本中的span和p标签格式，同时删除其他冗余HTML标签，以实现高效内容整合。

最近遇到需要将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())
                }
            }
        }()