在可编辑的 iframe ondblclick 中获取元素的属性答案

【问题标题】：Obtaining attributes of elements within editable iframe ondblclick在可编辑的 iframe ondblclick 中获取元素的属性
【发布时间】：2012-02-05 07:19:18
【问题描述】：

我正在使用 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，但我将其作为我希望实现的功能的示例。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html iframe wysiwyg

【解决方案1】：

这里有各种问题/误解：

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

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

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

【讨论】：

我知道 CKEditor 不使用 iframe。我引用它作为我最终想要实现的功能的一个例子。我已经使用了您发布的代码，但它似乎没有做任何事情。我双击 iframe 中的元素，但没有任何反应。基本上我所做的一切都是用你的替换旧的 dblClick() 和 dblClicked() 函数。我不确定我哪里出错了。任何帮助将不胜感激。
您的代码确实有效。问题是它只适用于 IE、Chrome 和 Safari。它仅在 iframe 未处于设计模式时才在 Firefox 中工作（这对于所见即所得的编辑器来说毫无意义），并且在 Opera 中根本不起作用（设计模式打开或关闭）。
@siberiantiger：很有趣。我会试试看。
非常感谢。顺便说一句，如果您需要查看我正在使用的代码，我将其全部放在我之前发布的这个问题中； stackoverflow.com/questions/8823831/….
我不知道它是否有帮助，但我使用的是最新版本的 Firefox 和 Opera（嗯，最新版本是 2011 年 8 月中旬，尽管我认为我的 Opera 版本已经自我更新自那以后）。只是想我会提到它。

【解决方案2】：

我建议在可管理的部分中逐步解决问题，而不是试图一次将所有内容放在一起。例如，我会将其分解为：

首先，弄清楚您需要实现哪些代码才能在当前网页上提供所需的双击行为。可能这将涉及一些简单的代码来迭代地将双击处理程序分配给页面上的每个元素，而不仅仅是<body> 元素本身。这最终是将在您的<iframe> 中运行的代码，您可以通过将其直接附加到<iframe> HTML 或通过在调用页面的上下文中运行一些代码来将其放在那里，就像您当前正在做的那样.
如有必要，重构您的双击处理程序实现，以便调用一个函数，该函数传递处理任何元素单击所需的所有信息。在易于访问的范围内定义此函数，例如 window._doubleClickHandler。这个函数定义属于你的<iframe>。
删除您在第 2 步中提出的函数定义，但保留所有引用/使用它的代码。现在，您的封闭页面可以方便地与来自<iframe> 的点击事件进行交互。
当<iframe> 加载时，封闭页面可以为您在步骤#2 中定义然后在步骤#3 中删除的函数提供自己的定义。

如果你经历了这一切，我建议你可以做一些更有用的事情，然后显示一个带有被点击元素标记的警报。就像在 HTML 编辑器中自动选择/突出显示相应的标记，或者将标记 sn-p 加载到可编辑的灯箱 UI 中，用户可以在其中进行更改，然后将它们自动应用于他们正在编辑的 HTML 文档。

【讨论】：

我明白你在说什么，我意识到我的要求对于一个问题来说太过分了。当我有更多时间时，我将更详细地查看我的问题并将其分解为几个问题。感谢您为我提供指导。