contenteditable=“true“ ----＞window.getSelection() 获取光标位置 & 光标位置插入内容

Posted 2022-04-01 吴杼恩

//光标位置插入 content
var insertContent = function (content) 
  if (content) 
    var sel = window.getSelection();
    if (sel.rangeCount > 0) 
      var range = sel.getRangeAt(0); //获取选择范围
      range.deleteContents(); //删除选中的内容
      var el = document.createElement("div"); //创建一个空的div外壳
      el.innerhtml = content; //设置div内容为我们想要插入的内容。
      var frag = document.createDocumentFragment(); //创建一个空白的文档片段，便于之后插入dom树
      var node = el.firstChild;
      var lastNode = frag.appendChild(node);
      range.insertNode(frag); //设置选择范围的内容为插入的内容
      var contentRange = range.cloneRange(); //克隆选区
      contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
      contentRange.collapse(true); //移动光标位置到末尾
      sel.removeAllRanges(); //移出所有选区
      sel.addRange(contentRange); //添加修改后的选区
    
  
;

//调用 
insertContent("<span>ddd</span>") or  insertContent("ddd")

获取光标位置
var getPosition = function (element) 
  var caretOffset = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") 
    //谷歌、火狐
    sel = win.getSelection();
    if (sel.rangeCount > 0) 
      var range = sel.getRangeAt(0);
      var preCaretRange = range.cloneRange(); //克隆一个选区
      preCaretRange.selectNodeContents(element); //设置选区的节点内容为当前节点
      preCaretRange.setEnd(range.endContainer, range.endOffset); //重置选中区域的结束位置
      caretOffset = preCaretRange.toString().length;
    
   else if ((sel = doc.selection) && sel.type != "Control") 
    //IE
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  
  return caretOffset;
;

//调用
getPosition(e.target)//js 对象