jquery - 在光标处插入表情符号

我早在堆栈溢出时就已经问过这个问题，但是没有得到答案。我有2个链接，分别称为添加表情符号1和添加表情符号2。
这是我的问题。
Insert smiley at cursor position

现在，即使我进行了某些更改，这里的问题仍然是，笑脸仅插入div的末尾而不是光标位置。
我的新演示位于: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"/>' );
});

我希望将笑脸插入光标所在的各个contenteditable div中。提前致谢。

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

最佳答案

我已经为ID为txtUserName的文本框测试了此代码。

代码:

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