使用弹出窗口在 div "contenteditable"中插入图像

Question

我有一个"插入图像"按钮，它调用一个弹出窗口。我这个弹出窗口，用户可以使用PHP将图像发送到服务器。当发送成功时，我会得到一个带有INPUT TEXT的页面。这个INPUT的值是发送的文件的名称（例如：image.jpg）

这是我的问题。我想把这个image.jpg插入到我的contentEditablediv（母窗口）中。

我想把图像保持在鼠标光标所在的位置。

我在这里找到了一个例子。。但是，当我的图像代码包含在div中时，它会显示为文本。。不是作为html标记。。。所以我只得到文本，而不是图像！

这是我得到的。。

脚本：

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

样式

#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">

非常感谢！

Answer 1

您可以获得图像的文本/文件名，对吗？你能让它返回上传文件的路径吗？如果是这样，您所需要做的就是动态创建一个img标记，并将其"src"属性更改为文件路径。

更改->insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));为

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