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

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

  1. Я хочу три divs и в любом div я, смайлик должен вставить в этот div.
  2. Кроме того, здесь проблема заключается в том, что смайлики вставляются только в конце div. Я хочу, чтобы смайлик должен был вводить только туда, где есть курсор.

Примечание. Убедитесь, что размер смайликов должен оставаться таким же во всех div.

Add Emoji

 $("#button").click(function() { $("#text").append(''); }); 

демонстрация

Сначала: вставьте в правый один из трех элементов:

Вы используете выражение #text которое ссылается на первый редактируемый div.

Если вы хотите настроить таргетинг на объект с последним фокусом на него, вы можете использовать для этого classы.

Добавьте к ним class, так что вы можете легко настроить таргетинг на любой из них

 
Add Emoji

Тогда вы можете легко решить, где находится фокус с помощью одного прослушивателя событий

 $( document ).on( "click focusin" , ".editable" , function(){ $( ".editable" ).removeClass( "focus" ); $( this ).addClass( "focus" ); } ); 

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

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

 $( document ).on( "click" , "#button" , function() { $( ".editable.focus" ).append( '' ); }); 


Второе: вставить в позицию курсора

Это кажется немного более сложным, но есть довольно чистые способы. Взгляните на эту тему .