append an image tag inside content editable div at cursor position

Question

I have a contentEditable div and a list of emojies 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.

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

$("#editable").append($(this).id); // $(this) is the image tag

How can I fix my problem? jsfiddle : http://jsfiddle.net/7VNTn/

Can you provide the needed code to reproduce the issue? also `$(this).id` is wrong, should be `$(this).attr('id')`, `$(this).prop('id')`, `this.id` or at least `$(this)[0].id` — Roko C. Buljan, Apr 30 '14 at 11:22
This may be your answer... http://stackoverflow.com/a/1064139/2394259 — wf4, Apr 30 '14 at 11:24

score 8 · Answer 1 · answered Dec 17 '14 at 13:59

try this code , change "IMAGE URL" with any image url

var image = '<p><img src="IMAGE URL" ></p>';

var sel, range, node;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(image);
            range.insertNode(node);
          }
   } else if (document.selection && document.selection.createRange) {
               document.selection.createRange().pasteHTML(image);
   }

score -2 · Answer 2 · answered Apr 30 '14 at 11:26

-2

Use following code.

        $("#editable").html($(this).id);

append method adds the element after your editable tag.So html method will put image inside youe row.try this

answered Apr 30 '14 at 11:26

Chetan

944
5
22

2

This will change the entire div content. OP wants to add the image at the cursor position – Batu.Khan Apr 30 '14 at 11:28
can you provide fiddle – Chetan Apr 30 '14 at 11:30

score -2 · Answer 3 · answered Apr 30 '14 at 13:48

-2

Try this code

$(document).ready(function(){

    $("#image1").click(function(){
    $("#editable").prepend($(this));
    });


});

I used prepend instead of append since you want the image to appear before the text.

answered Apr 30 '14 at 13:48

a_miguel6687

521
3
10
22

append an image tag inside content editable div at cursor position

3 Answers3