0

我正在制作一个带有实时预览的编辑器，这意味着当我HTML在里面输入代码时textarea，它会自动显示在里面iFrame，我目前有以下代码来选择iFrame:document.getElementById("IFRAME").contentWindow.document.activeElement但是我怎样才能让它在我点击时中的一个元素iFrame，它将选择我在textarea？一个概念也很好。

我最初的概念是：

当我点击element里面的一个时iframe，它会得到那个innerHTML并在里面activeElement搜索它textarea但是问题是如果用户有多个相同elements的相同的innerHTML怎么办？所以那是行不通的。

粗略代码（仅用于概念）：

HTML：

<iframe id="IFRAME"></iframe>
<textarea id="TEXTAREA" onkeyup="update()">
    <div id="clickme">
    </div>
</textarea>

JAVASCRIPT：

function update() {
document.getElementById('IFRAME') = document.getElementById('TEXTAREA').innerHTML;
}

function IFRAME_ELEMENT_CLICKED() {
    // When "clickme" is clicked from inside the iframe, select the innerHTML generated in the TEXTAREA
    // document.getElementById("IFRAME").contentWindow.document.activeElement ....
}
4

1 回答 1

1

在我看来，当您从 textarea 生成 iFrame 的预览时，您应该通过包含一个说明符来创建 dom 元素，该说明符充当 textarea 中的内容和 iFrame 的内容之间的链接。您可能可以开始为您在 iFrame 上生成的每个标签分配一个 id，该标签可以是文本区域中的光标位置/字符索引等（这需要更多操作，因为您需要重新分配iFrame 中的 ID，因为并非所有人都在文本区域的末尾键入文本）。

这样，当有人在 iFrame 上进行选择时，您就可以在 textarea 上捕获内容的确切位置。

于 2013-07-25T02:00:30.963 回答