在光標位置插入笑臉

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。