在光标位置插入元素

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

感谢伊舍伍德为我提供了答案的链接。从这里开始，我使用Tim给出的函数。然而，我提出了完整的答案，这可能有助于任何未来的初学者，试图使表情为基础的反馈框。

$(".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;`

});