CODEWITHSUNDEEP
javascripthtml
Flávio Alencar
Flávio Alencar

Reputation: 232

Insert image in "contenteditable" div using popup

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!

Upvotes: 8

Views: 10294

Answers (1)

Akshaya Shanbhogue
Akshaya Shanbhogue

Reputation: 1448

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'));

Upvotes: 10

Related Questions