Question

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

在一些基于iframe / JS的HTML编辑器中，如果用户希望访问或编辑元素的属性（例如图像尺寸，超链接网址，表格宽度），他们只需双击该元素即可显示模态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

我建议以可管理的方式解决问题，而不是试图同时将所有内容整合在一起。例如，我会将其分解为：

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

如果你完成所有这些，我会建议你可以做更多有用的事情，然后在里面显示点击元素的标记。比如在HTML编辑器中自动选择/突出显示相应的标记，或者将标记片段加载到可编辑的灯箱UI中，用户可以在其中进行更改，然后将它们自动应用于他们正在编辑的HTML文档。

Answer 2

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

您只使用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);
}

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

2 个答案: