在光标位置插入笑脸

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

第一：插入到右侧的三个元素中的一种：

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

如果您想将目标锁定在最后一个焦点上，您可以使用这些类。

添加一个类，所以你可以很容易地瞄准其中的任何

<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。