Question

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

这是我的问题。我想在我的contentEditable div（母窗口）上插入这个image.jpg。

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

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

这是我得到的......

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

风格

#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

您能够正确获取图像的文本/文件名吗？你能让它将PATH返回到上传的文件吗？如果是这样，您需要做的就是动态创建一个img标签并将其“src”属性更改为文件路径。

更改 - ＆gt; insertNodeOverSelection(document.createTextNode(form.area.value), document.getElementById('editable'));到

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

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

1 个答案: