Вставить emoji в курсор

Question

Я уже задавал этот вопрос раньше при переполнении стека, но не получил ответа. У меня есть 2 ссылки, называемые add emoji 1, и добавьте emoji 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.

Answer 1

Пожалуйста, найдите ниже строк кода, который позволит решить ваш запрос.

function insertAtCursor(myField, myValue) { 
    //IE support 
    if (document.selection) { 
     myField.focus(); 
     sel = document.selection.createRange(); 
     sel.text = myValue; 
    } 
    //MOZILLA and others 
    else if (myField.selectionStart || myField.selectionStart == '0') { 
     var startPos = myField.selectionStart; 
     var endPos = myField.selectionEnd; 
     myField.value = myField.value.substring(0, startPos) 
      + myValue 
      + myField.value.substring(endPos, myField.value.length); 
    } else { 
     myField.value += myValue; 
    } 
} 

И это возможно дубликат Insert text into textarea at cursor position (Javascript)

Пожалуйста, ознакомьтесь с приведенной выше ссылке для деталей

Answer 2

Я тестировал этот код для текстового поля с идентификатором txtUserName.Its работает, как вы хотите

Код:

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