在满足的div中插入笑脸

Question

我已经尝试过了：

Insert smiley at cursor position

Insert emoji at cursor

我之前就堆栈溢出问了这些问题。但我得到的答案不符合我的要求。我想在光标位置和一个可信的div中插入笑脸。我的演示在Demo。 表情符号仅插入div的末尾而不是光标位置。此外，我想在我点击的任何div中插入笑脸。这个功能已经有效，但笑脸总是在div的末尾添加。 Plz帮我这个，因为我已经尝试了很多方法。

 $( 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);        
}