javascript - 如何在另一个元素中将 contenteditable div 的内容呈现为 HTML？

Question

在下面的示例中，将 HTML 输入到 contenteditable div 中应该在 #html_view 中呈现为 HTML，但不是呈现为 HTML，而是呈现为文本。

例如:当输入以下 HTML 时，它应该在红色容器内呈现“sometext”，但字符串按原样传输。

<p style="background-color:red;">sometext</p>

如何在另一个元素中将 contenteditable div 的内容呈现为 HTML？

function move_to_the_other_div(el){
	document.getElementById('html_view').innerHTML = el.innerHTML;
}

#html_view{
  width:300px;
  overflow:hidden;
  border:1px solid gray;
  padding:10px;
  min-height:50px;
}
#code_view{
  width:300px;
  border:1px solid gray;
  padding:10px;
  min-height:50px;
  font-size:18px;
}

<div id="html_view"></div>
<div contenteditable id="code_view" oninput="move_to_the_other_div(this);" onpaste="move_to_the_other_div(this);"></div>

Answer 1

您需要使用 .innerText 从您的 el 获取数据

原因是，当您通过 innerHTML 检索信息时，它会从您的输入字段中提取 HTML 信息，但是，您编写的 HTML 是纯文本的，因此没有HTML 元素。因此，您必须获取纯文本并将目标 div 的 innerHTML 设置为包含 HTML 的字符串，而不是当前输入字段中的 HTML 语法。

还应注意 innerText 不适用于 FireFox

为了跨浏览器兼容性，我建议改用 textContent

---

文本内容

function move_to_the_other_div(el){
    document.getElementById('html_view').innerHTML = el.textContent;
}

---

innerText

function move_to_the_other_div(el){
    document.getElementById('html_view').innerHTML = el.innerText;
}

function move_to_the_other_div(el){
	document.getElementById('html_view').innerHTML = el.innerText;
}

#html_view{
  width:900px;
  overflow:hidden;
  border:1px solid gray;
  padding:10px;
  min-height:320px;
}
#code_view{
  width:900px;
  border:1px solid gray;
  padding:10px;
  min-height:320px;
  font-size:18px;
}

<div id="html_view"></div>
<div contenteditable id="code_view" oninput="move_to_the_other_div(this);" onpaste="move_to_the_other_div(this);"></div>