javascript - 在可编辑的 div 中插入笑脸

Question

我已经试过了:

Insert smiley at cursor position

Insert emoji at cursor

我之前在堆栈溢出时问过这些问题。但是我得到的答案不符合我的要求。我想在光标位置和可编辑的 div 中插入笑脸。我的演示在 Demo . 笑脸仅插入到 div 的末尾，而不插入到光标位置。另外，我想在我点击的任何 div 中插入笑脸。此功能已经可用，但笑脸总是添加在 div 的末尾。请帮助我，因为我已经尝试了很多方法。

 $( document ).on( "click" , "#button" , function() {
     $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );
 });

Note: I had a contenteditable div where I want to add image and not in the textarea.

Answer 1

这可能会有所帮助。

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection();
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.CreateElement("<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>");
    range.insertNode(textNode);
    range.setStartAfter(textNode);
    sel.removeAllRanges();
    sel.addRange(range);        
}