在光标处插入表情符号 [英] Insert emoji at cursor

问题描述

我之前已经在堆栈溢出时问过这个问题，但没有得到答案。我有2个链接，称为添加表情符号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/>'）; 
 }）; 
  

我希望smiley可以插入光标所在的各个contenteditable div。提前致谢。

注意：我有一个可以理解的div，我想添加图片而不是在textarea中。我已经测试了这个代码的文本框与id txtUserName.Its工作，你想要的 / p>



代码：
$ b

  $（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）; 
}）; 
  




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.

解决方案

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

这篇关于在光标处插入表情符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！