ボタンをクリックしながらcontenteditable div内の同じ場所にキャレットを保持する方法は？

Question

アイコン付きのボタンをクリックした後、私のcontenteditable divにアイコンを作成しようとしています。問題は、アイコン/ボタンを選択している間は、テキストのキャレットを失うことです。ボタンを閉じた後、このキャレットを元の場所に戻したいと思います。

私はこの問題を説明するためにJS-フィドルを作った：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のフォーカスメタあなたのクリックイベントメソッドでod。

新しいメールコンテンツの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/