Question

由于回答了documentation，所以在内容可编辑的div中用简单的文本获得插入符的位置here，但我要查找的内容有些不同：

我的contentEditable div包含一个文本以及img标签，以在文本内显示自定义表情符号，并且以下解决方案总是在有img标签的情况下重新初始化插入符号：

function getCaretPosition(editableDiv) {
  var caretPos = -1, sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  }
  return caretPos;
}
var update = function() {
  $('#caretposition').html(getCaretPosition(this));
};
$('#contentbox').on("mousedown mouseup", update);

#contentbox > img {
  width: 18px;
  height: 18px;
  margin-bottom: -4px;
}

#caretposition {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true">
  Click me to display caret position
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Emojione_1F60A.svg" />
  Click me to display caret position after the image
 </div>
<div id="caretposition">-1</div>

如您所见，运行此代码：

在表情符号返回正确的插入位置之前单击
单击表情符号可显示插入符号位置 -1
表情符号显示插入符号位置后立即单击 0
在表情符号之后单击文本可返回插入符号位置，就像div中的文本在表情符号之后开始一样

在计算插入符号位置时，是否有可能将表情符号视为文本中的简单字符？

使用'img'标签在contentEditable div中的插入位置

0 个答案: