百度UEditor自动删除超级链接与外链的方法

作者：袖梨 2022-06-25

UEditor确实是一个强大的编辑器，昨天领导说：

要编辑器的图文内容中，不能有外链/超级链接，需要进行清除。

然后我们这些苦逼的程序员就得屁屁的去改了。我尝试了2种方法

1、采用UEditor的自带的属性：

在ueditor.config.js中启用纯文本粘贴：

  
 

 代码如下 复制代码
  ,pasteplain:true  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
       // 纯文本粘贴模式下的过滤规则
        , 'filterTxtRules' : function(){
            function transP(node){
                node.tagName = 'p';
                node.setStyle();
            }
            return {
                ////直接删除及其字节点内容
                'a': { $: {} },
                //'-' : '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())
                //}
            }
        }()

这个会有问题，就是即使没有外链，文本都没有格式了。否了。

2、UEditor提供的命令和事件

参考详细文档：http://ueditor.baidu.com/doc/

这个需要在调用的Ueditor的时候定义事件：

 

 代码如下 复制代码
var editor;
  editor = UE.getEditor('container', {
        autoHeight: false,imagePopup:true
   });
     editor.addListener('contentChange', function () {
      editor.queryCommandValue("unlink");
     })
    editor.addListener('ready', function (editor) {
       //获取数据方法
    });

这个是有问题的，因为在contentChange的时候，方法调用了，但是editor.queryCommandValue("unlink");根本无效。 我跟踪了一下js代码，发现editor.queryCommandValue("unlink");的unlink会对选择区域进行判断，所以如果没有选择区域的话，这个方法是不执行的。

但是我也没怎么选择区域。

 代码如下 复制代码
 
UE.commands['unlink'] = {
        execCommand: function () {
          //var as=  editor.selection.getNative();
            var range = this.selection.getRange(),
                bookmark;
            if(range.collapsed && !domUtils.findParentByTagName( range.startContainer, 'a', true )){
                return;
            }
            bookmark = range.createBookmark();
            optimize( range );
            range.removeInlineStyle( 'a' ).moveToBookmark( bookmark ).select();
        },
        queryCommandState : function(){
            return !this.highlight && this.queryCommandValue('link') ?  0 : -1;
        }
    };

就是这个  var range = this.selection.getRange(),闹得。。。UEditor里没有找到设置高亮选择的命令和方法，有知道给说一下。

 

四、换思路了

我最后无奈了，只能在文章编辑完成后取出内容，用判断超级链接/a/http的正则表达式屏蔽掉外链，当然正则表达C#和js都可以，我在这里用的是js。

 代码如下 复制代码
 
 aaa.description = editor.getContent();
    var reg2 = /(http:＼/＼/|https:＼/＼/)((＼w|=|＼?|＼.|＼/|&|-)+)/g;
    var reg = new RegExp(reg2);
        aaa.description = aaa.description.replace(reg, "");

解决问题的思路往往就是这样，从最理想的开始，到最无奈的结束。

相关文章

精彩推荐