title: append an image tag inside content editable div at cursor position
body: <p>I have a <code>contentEditable</code> div and a list of <code>emojies</code> images. What I am trying to do is that when a user click on an image, the image tag should be inserted at the cursor position.</p>
  
  <p>I tired to do this but this code only insert the image at the end of the div which is not the case for me </p>
  
  <pre><code>$("#editable").append($(this).id); // $(this) is the image tag
  </code></pre>
  
  <p>How can I fix my problem?
  jsfiddle : <a href="http://jsfiddle.net/7VNTn/" rel="nofollow">http://jsfiddle.net/7VNTn/</a></p>