在光标位置插入元素

Question

我有一个满足的div：

<div class="r_review_content" contenteditable="true" 
      unselectable="false" style="padding:10px; vertical-align:bottom" ></div>

然后我有不同的笑脸图像。现在我想要实现的是，当我点击笑脸图像时，它应该被添加到上面div中的光标位置。这是我迄今取得的成就：

  $(".smiley_icon img").click(function(){
        var img_smiley =$(this).clone().css("width","18px");                
        $('.r_review_content').append(img_smiley);          
        return false;   
    });

Demo

任何帮助将不胜感激。

Answer 1

感谢isherwood为我提供了答案的链接。 从那里我使用Tim Down给出的功能。 但是我正在提供完整的答案，这对于将来尝试制作基于表情符号的反馈框的初学者来说可能会有所帮助。

$(".smiley_icon img").click(function(){
var img_smiley =$(this).clone().css("width","18px").wrap("<div />").parent().html();
$('#r_review_box-100 .r_review_content').focus(); pasteHtmlAtCaret(img_smiley); //adding html at cursorlocation BY - Tim Down return false;
});