javascript - 在光标位置插入笑脸

Question

我正在做一个元素，用户可以在其中点击笑脸，然后将他们插入到 contenteditable div 中。

1. 我想要三个 div，无论我是什么 div，笑脸都应该插入到那个 div 中。
2. 另外，这里的问题是笑脸符号只插入到 div 的末尾。我希望那个笑脸应该只在光标所在的地方输入。

注意:请检查笑脸的大小在所有 div 中是否应保持相同。

<div id="text_wrapper">
    <div id="text" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
   <div id="text1" contentEditable="true" hidefocus="true"></div>
</div>
<div id="text_wrapper">
   <div id="text2" contentEditable="true" hidefocus="true"></div>
</div>
<span id="button">Add Emoji</span>

---

$("#button").click(function() {
  $("#text").append('<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>');
});

Demo

Answer 1

首先:插入三个元素之一的右边:

您正在使用引用第一个可编辑 div 的表达式 #text。

如果您想将最后一个焦点放在它上面，您可以为此使用类。

为它们添加一个类，这样你就可以轻松地定位它们中的任何一个

<div id="text_wrapper">

    <div id="text" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<div id="text_wrapper">

   <div id="text1" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<div id="text_wrapper">

   <div id="text2" class="editable" contentEditable="true" hidefocus="true"></div>

</div>

<span id="button">Add Emoji</span>

然后您可以使用单个事件监听器轻松决定焦点在哪里

$( document ).on( "click focusin" , ".editable" , function(){

    $( ".editable" ).removeClass( "focus" );
    $( this ).addClass( "focus" );

} );

从这一点开始，获得焦点的元素(带有光标的元素)将具有类“.focus”。

现在，你可以使用

$( document ).on( "click" , "#button" , function() {

  $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );

});

---

第二种:在光标位置插入

这似乎有点复杂，但是有一些非常简洁的方法。看看this topic .