Insert image in "contenteditable" div using popup

Question

I have a "insert image" button that calls a popup window. I this popup, user can send an image to server using PHP. When the send is sucessifully, I get a page with a INPUT TEXT. The value os this INPUT is the name of the file sent (for example: image.jpg).

Here is my problem. I would like to insert this image.jpg on my contentEditable div (mother window).

And I would like to keep the image same place where the mouse cursor was.

I found one example here.. But when my image code is included on the div, it appears as a text.. Not as a html tag... So I get only the text, not the image!

Here is what i got..

SCRIPT:

function isOrContainsNode(ancestor, descendant) {
    var node = descendant;
    while (node) {
        if (node === ancestor) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

function insertNodeOverSelection(node, containerNode) {
    var sel, range, html, str;


    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (isOrContainsNode(containerNode, range.commonAncestorContainer)) {
                range.deleteContents();
                range.insertNode(node);
            } else {
                containerNode.appendChild(node);
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (isOrContainsNode(containerNode, range.parentElement())) {
            html = (node.nodeType == 3) ? node.data : node.outerHTML;
            range.pasteHTML(html);
        } else {
            containerNode.appendChild(node);
        }
    }
}

STYLE

#editable { width:100%; height:100px; border:1px solid black; }
#oculta { width:100%; height:30px; border:1px solid black; display:none; }

HTML

<div contenteditable="true" id="editable">
</div>

<div id="oculta">
<form name="form">
&nbsp;<textarea name="area" rows="2" name="S1" cols="20"></textarea>
<input type="button" onmousedown="insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));" value="insert"></form>
</div>
<input type="button" onmousedown="document.getElementById('oculta').style.display='block';" value="test">

Thanks a lot!

Ha! Your _question_ contained the _answer_ I was looking for; how to insert content at caret position, into an content-editable. Thanks a lot! — stafffan, Jun 26 '13 at 21:25

Akshaya Shanbhogue · Accepted Answer · 2012-02-12T12:37:32.723

You are able to get the text/filename of the image right? Can you make it return the PATH to the uploaded file? If so, all you need to do is dynamically create an img tag and change it's "src" attribute to the file path.

change -> insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable')); to

var x=document.createElement('img'); 
x.src=form.area.value; 
insertNodeOverSelection(x, document.getElementById('editable'));

Insert image in "contenteditable" div using popup

1 Answers1