Вставить смайлик в позицию курсора

Question

Я делаю проект, в котором пользователи могут щелкнуть по смайликам, и они будут вставлены в contenteditable div.

1. Я хочу три divs и в любом 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"); 

}); 

С этой точки, сфокусированный элемент (тот, у которого есть курсор) будет иметь класс «.фокус».

Теперь вы можете использовать

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

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

}); 

---

Во-вторых, вставить в позиции курсора

Это, кажется, немного Больше сложный, но есть довольно чистые способы. Взгляните на this topic.