• 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 !

  • 相关阅读:
    Vue.js监听事件
    Vue.js组件传值
    Vue.js安装
    C#中输入法全角转换半角
    文件夹操作
    转JSON字符串,并进行AES加密
    ReportView报表的使用
    c++读入优化
    快读板子
    【转】2020年 大二上 ACM
  • 原文地址:https://www.cnblogs.com/aleafo/p/5360175.html
Copyright © 2020-2023  润新知