在光标处插入表情符号

Posted 2023-05-07

【中文标题】在光标处插入表情符号

【英文标题】：Insert emoji at cursor

【发布时间】：2015-10-18 14:08:38

【问题描述】：

我之前已经在堆栈溢出时问过这个问题，但没有得到答案。我有 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"/>' );
);

我希望将笑脸插入到光标所在的相应内容可编辑 div 中。提前致谢。

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

【参考方案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。而且我不想使用表单元素。我正在使用 div。

【参考方案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;
    

它可能与Insert text into textarea at cursor position (javascript) 重复

请查看以上链接了解详情

【讨论】：

从哪里找到myField、myValue——函数@Amit Chhangani的参数

或者什么是sel？这个答案不完整

myField 是您必须在其中插入表情符号的“div”，而 myValue 是要插入的表情符号的链接。详情请点击链接。它的工作方式与使用 textarea 的方式相同。

此代码是否适用于 contenteditable div @Amit Chhangani。我试过了，但它不起作用。而且我想添加图像，而不是文本