Insert emoji at cursor

Question

I already asked this question earlier on stack overflow but didnot get a answer. I have 2 links called add emoji 1 and add emoji 2. This was my ealier question. Insert smiley at cursor position

Now, even when I had made certain changes and the here the problem is that smileys only insert at the end of the div and not at the cursor position. My new demo is at: https://jsfiddle.net/ftwbx88p/8/

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

I want the smiley to insert in the respective contenteditable div where ever the cursor is. Thanks in advance.

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

Answer 1

I have tested this code for textbox with id txtUserName.Its working as you want

Code:

$(document).on("click", "#button1", function () {
        var cursorPosition = $("#txtUserName")[0].selectionStart;
        var FirstPart = $("#txtUserName").val().substring(0, cursorPosition);
        var NewText = " New text ";
        var SecondPart = $("#txtUserName").val().substring(cursorPosition + 1, $("#txtUserName").val().length);
        $("#txtUserName").val(FirstPart+NewText+SecondPart);
    });