Question

我正在TextEditor中键入HTML标记，并希望在TextEditorPreview中预览它而没有任何HTML标记，但是出于某种原因html标记出现在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>

Answer 2

这是因为当您键入<时，contenteditable会得到<，因为它试图表示实际字符，而不是标记的开头。

最简单的方法是在输入的位置使用textarea。另外，删除document.getElementById("TextEditorPreview").html();行，如果行行将不执行任何操作，并引发错误（因为html不是本机DOM元素的方法）：

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

<textarea id="TextEditor" style="height: 300px;width: 300px;border: 1px solid black"></textarea>

<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>

在一个div中编写HTML标记，在另一个div中查看所见即所得

2 个答案: