Javascript 在光标位置插入笑脸

我正在做一个项目，用户可以点击笑脸，然后将其插入contenteditable div

我想要三个div，不管我是什么div，笑脸都应该插入到那个div中。 另外，这里的问题是，smiley只在div的末尾插入。我希望smiley只在光标所在的位置输入。 注意：请检查所有div中笑脸的大小是否保持不变

第一：在右侧插入以下三个元素之一：

您使用的是引用第一个可编辑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>

从这一点开始，焦点项（带有光标的项）将具有class.focus

现在，你可以使用

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

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

});

第二：在光标位置插入

---

这似乎有点复杂，但有相当干净的方法。看看。

你的问题不清楚。。请详细说明。要获取contentEditable元素中的光标位置，您可以查看以下问题：使用focusin事件设置当前div，请参见。另请参见添加笑脸后如何控制光标位置。我刚刚用您的解决方案进行了修改。。谢谢@steven。但我不知道如何得到光标的位置。此外，如果我有多个笑脸，我将如何管理它们。你能给我一个主意吗？我试过你的密码了。我想知道当我在第一个div中插入smiley时，smiley很小，但在其他div中，它会变大@steven palinkasYour在CSS:text img{width:50px；}中的声明可以更正为以所有可编辑div为目标。可编辑img{width:50px；}

<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"/>' );

});