防止 HTML 标签的条带化答案

【问题标题】：Prevent striping of HTML tags防止 HTML 标签的条带化
【发布时间】：2016-04-15 13:54:25
【问题描述】：

我正在我的应用程序中制作一个 HTML 编辑器，它从数据库中获取 HTML 内容并将其复制到内容可编辑的 DIV 中。但在进行更改后，它会去除<html>、<head> 和<body> 标签，但保留正文内容。

我该如何解决这个问题？

 document.getElementById('editHtmlView').innerHTML = document.getElementById('content').value;

#content 是从数据库中获取的内容。

<div id="editHtmlView" contenteditable="true"></div>

【问题讨论】：

请显示一些代码。帮助我们帮助您。
@JonathanLam 已编辑。
您可能希望将删除的内容保留在变量中，并在编辑完成后保存到数据库时将其添加回来。
@boomcode 如果您获取的内容是它自己的文档，带有自己的 HTML 标记，那么您最好将内容加载到 iframe 中。如果出于某种原因这不是一个选项，您应该在数据被剥离之前存储进来的数据的 HTML 和 HEAD，然后在将其保存到数据库时重新添加它（如果需要） - 正如 Sharky 建议的那样

【解决方案1】：

如果您希望标签显示为文本，请尝试将 .innerHTML 更改为 .textContent

.innerHTML 尝试更改 div 中的实际 HTML，这会导致浏览器拒绝没有意义的标签（例如 div 中的 <html> 标签）。通过.textContent 设置内容将标签保留为文本，并且通常也更安全。

【讨论】：

啊，还以为你用的是jQuery；更新了答案。
@Steve OP 确实用 jQuery 标记了这个问题，所以我假设你可以使用它来回答。
@Steve 这确实复制了整个 HTML 内容，但不显示可编辑的预览，我可以更早获得。
@Steve 我也很喜欢使用 jquery 方法。
听起来你想构建一个所见即所得的编辑器。我认为很难将 HTML 注入 div 并且不让它去除这些标签。也许 iframe 更好？或者使用库可能更容易。您可以在以下线程中阅读有关使用/构建所见即所得编辑器的更多信息：stackoverflow.com/questions/10162540/…stackoverflow.com/questions/4426478/building-a-wysiwyg-editor