在内容可编辑的 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"/>' );
 });

注意：我有一个内容可编辑的 div，我想在其中添加图像，而不是在 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);        
}