在光标处插入表情符号

Question

我之前在Stack Overflow上询问过这个问题，但没有得到答案。我有两个链接，称为“添加表情符号1”和“添加表情符号2”。 以下是我的先前问题。 在光标位置插入笑脸

即使我对其进行了某些更改，问题仍然存在，即表情符号只会在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中插入笑脸。提前感谢。

注意：我有一个 contenteditable div，想要添加图片，而不是在文本区域中添加。

- Amanjot Kaur

Answer 1

我已经测试了这段代码，针对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);
    });

- Muhammad Atif

---

我的代码出问题了，@Muhammad Atif。我不想使用表单元素，而是使用div。 - Amanjot Kaur

Answer 2

请查看下面的代码行，它将解决您的问题。

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

这可能是一个重复的问题，与在JavaScript中将文本插入到文本区域的光标位置有关。

请查看上面的链接以获取详细信息

- Amit Chhangani

---

从哪里可以找到 @Amit Chhangani 函数的参数 myField 和 myValue？ - Amanjot Kaur

或者什么是sel？这个答案不够充分。 - sertsedat

myField 是您要插入表情符號的 "div"，而 myValue 是要插入的表情符號链接。有关详细信息，请按照链接操作。它将与 textarea 的工作方式相同。 - Amit Chhangani

这段代码适用于contenteditable div吗，@Amit Chhangani。我尝试了一下，但它不起作用。我还想添加图片，而不是文本。 - Amanjot Kaur