javascript - ondblclick 获取可编辑 iframe 中元素的属性

Question

我正在使用 javascript 和可编辑的 iframe 开发一个所见即所得 HTML 编辑器。在开发编辑器之前，我对使用 javascript 和 iframe 的其他 HTML 编辑器(包括 CKEditor )进行了一些研究，并且有一个功能我正在努力复制。

在一些基于 iframe/JS 的 HTML 编辑器中，如果用户希望访问或编辑元素的属性(例如图像尺寸、超链接 url、表格宽度)，他们只需双击该元素，就会出现一个模态 div包含该元素和/或该元素内的元素的属性值的文本框。

到目前为止，我最接近开发此类功能的方法是创建一个脚本，用于提醒用户双击 iframe 内某个区域的 HTML 代码。我将此代码添加到我的 HTML 页面中；

<iframe name="wysiwyg" id="wysiwyg" onload="dblClick();"></iframe>

并将此代码添加到我的 javascript 文件中；

function dblClick(){
        document.getElementById("wysiwyg").contentWindow.document.ondblclick=dblClicked;
        window.frames["wysiwyg"].document.body.ondblclick=dblClicked;
}

function dblClicked (){
        txt = wysiwyg.document.selection.createRange().htmlText;
        alert(txt);
}

问题在于，此代码仅在用户双击并突出显示一段文本时才起作用，例如，双击所选的粗体文本会向用户提醒这段代码；

<b>text</b>

双击任何其他内容都会发出错误消息警报。此外，它只能在 Internet Explorer 中正常工作。当我在 Firefox、Opera、Chrome 和 Safari 中测试它时，脚本要么无法运行，要么无法正常运行(在 Firefox 中，一旦页面加载，脚本就会发出错误消息警报)。

我需要的是一个脚本，允许最终用户查看他们在可编辑 iframe 中双击的任何元素的所有属性，并且可以在所有主要浏览器中使用。

我知道简单地使用现有的所见即所得编辑器会更容易，但我更喜欢从头开始创建自己的编辑器，因为我喜欢挑战。另外，我知道 CKEditor 似乎不像我的那样使用 iframe，但我将其作为我希望实现的功能类型的示例进行引用。

如有任何帮助，我们将不胜感激。

Answer 1

这里存在各种问题/误解:

• 您仅使用 IE 的旧选择和 TextRange API，其他浏览器不支持该 API；
• 您似乎不确定如何访问 iframe 的文档，并且不必要地附加了两次 dblclick 处理程序。
• CKEditor 确实使用 iframe

我建议跳过选择内容并使用事件委托(delegate)来获取双击的元素，这适用于所有主要浏览器。

var iframeWin;

function dblClick() {
    iframeWin = document.getElementById("wysiwyg").contentWindow;
    iframeWin.document.ondblclick = dblClicked;
}

function dblClicked(evt) {
    evt = evt || iframeWin.event;
    var target = evt.target || evt.srcElement;
    alert(target.tagName);
}