iFrame 和 Textarea Editor Live Preview 以及 activeElement 的“Des

我正在制作一个具有实时预览功能的编辑器，这意味着当我在textarea内键入HTML代码时，它将自动显示在iFrame中，我目前有以下代码来选择iFrame中的活动元素： document.getElementById("IFRAME").contentWindow.document.activeElement但是我该怎么做呢，以便当我单击iFrame内的元素时， 它将选择我在textarea中编写的元素源？一个概念也会很好。

我最初的概念是：

当我单击iframe内的element时，它将获得activeElement的innerHTML并在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 ....
}