Insert element at cursor position

Question

I have a contenteditable div:

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

then I have different smiley images. Now what I am trying to achieve is that when I click on smiley image it should get added at cursor location in above div. This is what I have achieved so far:

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

Demo

Any help will be appreciated.

This question is similar: http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div — isherwood, Aug 24 '14 at 16:38

score -2 · Accepted Answer · answered Aug 24 '14 at 18:29

Thanks to isherwood for providing me the link to my answer. From there I am using the function given by Tim Down. However I am putting complete answer which could be helpful for any future beginner trying to make emoticons based feedback box.

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

Insert element at cursor position

1 Answers1