javascript - 在一个 div 中编写 HTML 标签，然后在另一个 div 中查看所见即所得

Question

我正在 TextEditor 中输入 HTML 标签，并希望在没有任何 HTML 标签的 TextEditorPreview 中预览它，但由于某种原因，html 标 checkout 现在 TextEditorPreview 中

$('#TextEditor').keyup(function() {
  document.getElementById("TextEditorPreview").innerHTML = document.getElementById("TextEditor").innerHTML;

  document.getElementById("TextEditorPreview").html();
});

<div contenteditable="true" id="TextEditor" style="height: 300px;width: 300px;border: 1px solid black"></div>

<div id="TextEditorPreview" placeholder="preview" style="height: 300px;width: 300px; border: 1px solid #cccccc;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您应该将 TextEditor 的文本填充到 TextEditorPreview div

var text = $("#TextEditor").text();
$("#TextEditorPreview").html(text );

示例:

$('#TextEditor').keyup(function() {
  var text = $("#TextEditor").text();
  $("#TextEditorPreview").html(text);
});

<div contenteditable="true" id="TextEditor" style="height: 300px;width: 300px;border: 1px solid black"></div>

<div id="TextEditorPreview" placeholder="preview" style="height: 300px;width: 300px; border: 1px solid #cccccc;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>