如何獲得包含圖像的contenteditable div的插入位置

Question

我有這個contentedittable div

<div contenteditable="true" id="text">minubyv<img src="images/smiley/Emoji Smiley-01.png" class="emojiText" />iubyvt</div>

這是代碼輸出的圖像描述

所以我想獲得div的插入位置，並假設光標位於最后一個字符之后。 這是我獲得插入位置的代碼

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

var update = function() {
  console.log(getCaretPosition(this));
};
$('#text').on("mousedown mouseup keydown keyup", update);

但問題是它返回6而不是14 。 插入符號位置在圖像后回到0 。 請問在這種情況下我可以將插入位置設為14 。

編輯

我想從插入符號位置開始插入一些元素。 所以這是我的功能

selectStart = 0;
var update = function() {
  selectStart = getCaretPosition(this);
};
function insertEmoji(svg){
    input = $('div#text').html();
    beforeCursor = input.substring(0, selectStart);
    afterCursor = input.substring(selectStart, input.length);
    emoji = '<img src="images/smiley/'+svg+'.png" class="emojiText" />';
    $('div#text').html(beforeCursor+emoji+afterCursor);
}

Answer 1

請參閱Tim Down的答案， 獲取范圍相對於其父容器的開始和結束偏移量 。

嘗試使用他擁有的函數來獲取具有嵌套元素的選擇索引，如下所示：

 function getCaretCharacterOffsetWithin(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 = win.getSelection().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") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToEnd", textRange); caretOffset = preCaretTextRange.text.length; } return caretOffset; } var update = function() { console.log(getCaretCharacterOffsetWithin(this)); }; $('#text').on("mousedown mouseup keydown keyup", update); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div contenteditable="true" id="text">minubyv<img src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div> 

我寫了自己的功能，基於Tim Down，它的工作方式就像你想要的那樣。 我更改了treeWalker以過濾NodeFilter.ELEMENT_NODE的NodeFilter.SHOW_TEXT ，現在<img/>元素也在我們的循環內處理。 我首先存儲range.startOffset ，然后遞歸所有選擇樹節點。 如果它找到一個img節點，那么它只會向該位置添加1; 如果當前節點元素與我們的range.startContainer不同，則它會添加該節點的長度。 該位置由另一個變量lastNodeLength更改，該變量在每個循環中添加到charCount 。 最后，它將lastNodeLength剩余的內容lastNodeLength到charCount當它存在循環時，我們有正確的最終插入位置，包括圖像元素。

最終的工作代碼 （最后返回14，完全按照你想要的那樣）

 function getCharacterOffsetWithin_final(range, node) { var treeWalker = document.createTreeWalker( node, NodeFilter.ELEMENT_NODE, function(node) { var nodeRange = document.createRange(); nodeRange.selectNodeContents(node); return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; }, false ); var charCount = 0, lastNodeLength = 0; if (range.startContainer.nodeType == 3) { charCount += range.startOffset; } while (treeWalker.nextNode()) { charCount += lastNodeLength; lastNodeLength = 0; if(range.startContainer != treeWalker.currentNode) { if(treeWalker.currentNode instanceof Text) { lastNodeLength += treeWalker.currentNode.length; } else if(treeWalker.currentNode instanceof HTMLBRElement || treeWalker.currentNode instanceof HTMLImageElement /* || treeWalker.currentNode instanceof HTMLDivElement*/) { lastNodeLength++; } } } return charCount + lastNodeLength; } var update = function() { var el = document.getElementById("text"); var range = window.getSelection().getRangeAt(0); console.log("Caret pos: " + getCharacterOffsetWithin_final(range, el)) }; $('#text').on("mouseup keyup", update); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div contenteditable="true" id="text">minubyv<img contenteditable="true" src="https://themeforest.net/images/smileys/happy.png" class="emojiText" />iubyvt</div>