单击按钮时，如何在我的 contenteditable div 中将插入符号保持在同一位置？

Question

单击带有图标的按钮后，我试图在我的 contenteditable div 中创建一个图标。问题是，在选择图标/按钮时，我丢失了文本中的插入符号。关闭按钮后，我希望这个插入符号回到原来的位置。

我做了一个 JS-Fiddle 来说明这个问题：JSFiddle

PS：这个问题尤其是关于插入符号的。是否插入图标对我来说并不重要。那部分应该很容易弄清楚:)。

html

<div id="write-mail">
   <div style="position: relative;">
      <div id="new-mail-content" contenteditable="true">
          <div>How to return the caret where it was in the sentence after clicking the buttons?</div>
          <div>Maybe prevent the caret from being removed after clicking the buttons?</div>
          <div>I know I can store the current selection by using window.getSelection(). If I would be able to reactivate this selection, that would be great!</div>
      </div>
      <div id="emotepicker">
        <button><span>&#10004;</span></button>
        <button><span>&#10031;</span></button>
        <button><span>&#10008;</span></button>
      </div>
  </div>
        <button class="add-icon">Add Icon</button>
</div>

css

#new-mail-content{
  background-color: white;
  min-height: 5em;
}
#write-mail button{
  height: 30px;
}
#emotepicker{
  display: none; 
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.1);
  text-align: center;
}
div{
  padding: 2px;
}

jquery/javascript

$(".add-icon").click(function(){
    $("#emotepicker").toggle();
});

Answer 1

在单击事件方法中使用 jquery 焦点方法。

您可能希望将 new-mail-content div 设置为文本区域。这样的事情应该可以工作。

$(".add-icon").click(function(){
    $("#emotepicker").toggle();
    $("#new-mail-content").focus();
});

这里是文档的链接：https://api.jquery.com/focus/

Answer 2

这应该可以满足您的需要：

var caretpos =0 ;
$(".add-icon").click(function(){
    $("#emotepicker").toggle();
});

$('#close').click(function(e){
    $("#emotepicker").toggle();
  $("#new-mail-content").focus();
  var node = document.querySelector("new-mail-content");
  node.focus();
  var textNode = node.firstChild;
  var caret = caretpos;
  var range = document.createRange();
  range.setStart(textNode, caret);
  range.setEnd(textNode, caret);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
})

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;
}

function showCaretPos() {
    var el = document.getElementById("new-mail-content");
    var caretPosEl = document.getElementById("caretposition");
    caretpos = getCaretCharacterOffsetWithin(el);
    caretPosEl.innerHTML = "Caret position: " + carePosEl;
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;

https://jsfiddle.net/bdy2Ltwo/4/