我试图创建一个最小的队列编辑器。我有两个面板：一个是我写文本/代码的面板，它的颜色与单词有关，然后我有另一个面板具有预览功能（查看html代码的输出）。然后是code panel和preview panel。
x1c 0d1x的数据
以前构建code panel时，我使用了<textarea>。使用textarea时，文本没有颜色，但preview panel工作正常。现在我使用div和contenteditable。使用它们，文本颜色正确，但preview panel不工作，undefined在内部打印。

**问题：**问题可能是preview panel无法从代码面板（div与contenteditable）中恢复html代码，因为html文本未打印格式化（与打印格式化文本的textarea不同）。因此，错误地，输出打印在代码面板中，而不是html代码

的
如何在面板代码中显示格式化文本，从而在面板代码中显示输出？
我想要什么？**正如你所看到的，如果我在code panel中写入<h1>This is a Heading</h1>和<p>This is a paragraph</p>，格式化的文本不会打印出来，但输出会直接打印出来。我不希望这样。
相反，我想得到这个：

的

index.html

<div id="editor" contenteditable="true" oninput="showPreview()">

<!-- HTML CODE TO PRINT -->
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<!-- -->

</div>

<h3>PREVIEW</h3>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

字符串

style.css

#editor {
  width: 400px;
  height: 100px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
}
.statement {
  color: orange;
}

型

JavaScript.js

//PREVIEW
function showPreview() {

    var editor = document.getElementById("editor").value;
    
    // var cssCode =
    //  "<style>" + document.getElementById("cssCode").value + "</style>";
    // var jsCode =
    //  "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
    
    var frame = document.getElementById("preview-window").contentWindow.document;
    frame.open();
    //frame.write(htmlCode + cssCode + jsCode);
    frame.write(editor);
    frame.close();
}


// CHANGE COLOR TEXT
    var keywords = ["DIV", "DIV", "H1", "H1", "P", "P", "HELLO", "<", ">", "/"];
    // Keyup event
    document.querySelector('#editor').addEventListener('keyup', e => {
    // Space key pressed
    if (e.keyCode == 32) {
        var newHTML = "";
        // Loop through words
        str = e.target.innerText;
        chunks = str
          .split(new RegExp(
            keywords
              .map(w => `(${w})`)
              .join('|'), 'i'))
          .filter(Boolean),
        markup = chunks.reduce((acc, chunk) => {
          acc += keywords.includes(chunk.toUpperCase()) ?
          `<span class="statement">${chunk}</span>` :
          `<span class='other'>${chunk}</span>`
          return acc
        }, '')      
        e.target.innerHTML = markup;

        // Set cursor postion to end of text
        //    document.querySelector('#editor').focus()
        var child = e.target.children;
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        this.focus();
            
        }
    });

型