zoukankan      html  css  js  c++  java
  • 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 !

  • 相关阅读:
    eclipse 使用 maven 无法编译 jsp 文件的问题
    iOS开发-Quartz2D绘制时定时器选择
    iOSUI-事件处理
    iOS开发-数据存储
    iOSUI-UIScrollView属性,方法大全
    iOSUI-UITableView属性,方法大全
    iOS网络-NSURLSession/AFNetworking发送HTTPS网络请求
    iOS网络-AFNetworking检测网络状态
    iOS网络-AFNetworking序列化
    iOS网络-AFNetworking基本使用,文件下载,上传
  • 原文地址:https://www.cnblogs.com/aleafo/p/5360175.html
Copyright © 2011-2022 走看看