Insert smiley in a contenteditable div

Question

I had already tried:

Insert smiley at cursor position

Insert emoji at cursor

I had asked these questions earlier on the stack overflow. But the answers that I got did not fit with my requirements.I want to insert smiley at the cursor position and in a contenteditable div. My Demo is on Demo . Smileys only insert at the end of the div and not at the cursor position. Also, I want to insert the smiley in whatever div I click. This functionality is already working but the smiley always get added at the end of the div. Plz help me this as I had already tried a lot of methods.

 $( 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

This may help.

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