修改wangEditor插入链接特性之JS Range对象

in 前端 with 0 comment

前几天一个项目中用到了wangEditor，发现选中对象然后插入链接功能有一些不好用。
它只会包含选中区域内的文字。
所以就稍微修改了一下。

// 选中区域的HTML
    getSelectionHTML: function () {
      var range = this._currentRange;

      if (range) {

        var wrapper = document.createElement("div");
        wrapper.appendChild(range.cloneContents())
        return wrapper.innerHTML;
      } else {
        return '';
      }
    }
//显示panel
this._createPanel(editor.selection.getSelectionHTML(), '');
// panel 内的文字需要进行转义，模板拼接的时候才不会出错
_htmlspecialchars:function(str) {
      str = str.replace(/&/g, '&');
      str = str.replace(/</g, '&lt;');
      str = str.replace(/>/g, '&gt;');
      str = str.replace(/"/g, '&quot;');
      str = str.replace(/'/g, '&#039;');
      return str;
    }

先得到选中区域的html，然后在新建panel的时候将text转义，这样链接内部就可以插入任意选区了。

//知识点

var selection, range;
if (window.getSelection) { 
    //现代浏览器
    selection = window.getSelection();
} else if (document.selection) { 
    //IE
    selection = document.selection.createRange();
}

//Range对象
range = selection.getRangeAt(0);

//选中区域的文字
var text = range.toString();

//选中区域的Element元素
var elem = range.commonAncestorContainer;
if(elem.nodeType != 1){
     elem = elem.parentNode;
}

//选中区域的html
var span = document.createElement('SPAN');
span.appendChild(range.cloneContents());

//选区是否为空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
   if (range.startOffset === range.endOffset) {
       isSelectionEmpty = true;
   }
}

赞助一杯咖啡☕️

本文由 widdy 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 29, 2018 at 04:29 pm

← → ↓ ↑
Comments are closed.