javascript - 在 iframe 的 contenteditable 字段中访问选定的图像

Question

我在获取 iframe 内可内容编辑的 div 容器内的 src 或 id 或任何选定图像时遇到问题。好吧，可以使用 getSelection() 调用来获取选定的文本信息，如下所示：

window.document.getElementById("monitor").contentWindow.document.getSelection();
// "monitor" = iframe id

但是，如果我选择图像而不是文本，我只会得到一个空结果。我搜索了几个小时，但没有找到任何解决方案。有人知道如何解决这个问题吗？（我使用的是 Firefox 4）

Answer 1

window.getSelection()（它document.getSelection()是 HTML5 兼容浏览器中的别名）返回一个Selection对象，而不是一个字符串（它只是表面上看起来是一个字符串，因为它的toString()方法返回选定的文本）。对此最有用的方面是能够获取一个或多个表示选择的DOM Range对象getRangeAt()。

一旦有了 Range，获取它包含的所有 DOM 节点就有点棘手了。你可以使用我的Rangy库，它getNodes()为 Range 的实现添加了一个方法：

var sel = rangy.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    var elements = range.getNodes([1]);
    for (var i = 0; i < elements.length; ++i) {
        alert("Selected element: " + elements[i].tagName);
    }
}