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

 

我正在开发一个使用javascript和可编辑的iframe的wysiwyg 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中双击的任何元素的所有属性，并可在所有主流浏览器中使用。

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

任何帮助，将不胜感激。

这里有各种各样的问题/误解：

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

    我建议在可管理的块中逐步解决问题，而不是试图一下子把所有东西放在一起。 例如，我会把它分解为：

  • 首先，找出需要实现的代码，以便在当前网页上提供所需的双击行为。 可能这会涉及到一些简单的代码来为页面上的每个元素迭代地分配一个双击处理程序，而不仅仅是指向<body>元素本身。 这最终是将在<iframe>运行的代码，您可以直接将它附加到<iframe> HTML中，或者通过在调用页面的上下文中运行一些代码（就像您当前正在执行的代码一样） 。

  • 如果有必要，可以重构双击处理程序实现，以便有一个函数被调用，它传递了处理点击任何元素所需的所有信息。 在易于访问的范围中定义此函数，如window._doubleClickHandler 。 该函数定义属于<iframe>内部。

  • 删除步骤2中提出的函数定义，但保留所有引用/使用它的代码。 现在，您的封闭页面提供了一个便捷点，可以与来自<iframe>的点击事件进行交互。

  • 加载<iframe>时，封闭页面可以为您在步骤＃2中定义的功能提供自己的定义，然后在步骤＃3中将其删除。

    • 如果你经历了所有这些，我会建议你可以做更多有用的事情，然后在其中显示一个警告点击元素的标记。 就像在HTML编辑器中自动选择/突出显示相应的标记一样，或者将标记片段加载到用户可以进行更改的可编辑的Lightbox用户界面中，然后将它们自动应用于正在编辑的HTML文档。

    链接地址: http://www.djcxy.com/p/89999.html

    上一篇: Obtaining attributes of elements within editable iframe ondblclick

    下一篇: How does Optimizely & Visual Website Optimizer handle visual DOM editing?