防止用户生成的内容破坏布局？

Question

我有一个包含一些用户生成的内容的网站，我希望能够将布局的标记以及用户生成的内容的标记分开，这样 ug 内容就不会破坏网站布局。

用户生成的内容是可信的，因为它来自我网络上的已知用户组，但尽管如此，只允许一小部分 html 标签（p、ul/ol/li、em、strong 等） ）。然而，用户生成的内容不能保证格式良好，并且我们遇到过一些格式错误的用户生成内容破坏网站布局的实例。

我们正在与用户合作，以​​保持内容格式良好，但与此同时，我正在尝试找到一种将内容与布局分开的好方法。我一直在研究命名空间，但无法找到有关嵌入式命名空间的 CSS 支持的良好文档。

有人有什么好主意吗？

编辑

我在这里看到了一些非常好的建议，但我可能应该澄清一下，我完全没有控制用户使用的输入机制。他们将内容输入一个系统，而我的页面使用该系统的 API 从中提取内容。该系统正在使用 TinyMCE，但正如我所说，我们仍然收到一些格式错误的内容。

Answer 1

为什么不使用 markdown

如果您的用户懂得 HTML 或能够掌握 markdown 语法概念的人，我建议您选择使用 markdown。 Stackoverflow 与它配合得很好。我无法想象 Stackoverflow 上有一个普通的富编辑器。 Markdown 编辑器使用起来更加简单、快捷，并且为大多数情况提供了足够的格式化功能。如果您需要一些特殊的附加功能，您可以随时添加这些功能，但对于初学者来说，开箱即用的功能就足够了。

用于自我验证的实时视图

但不要忘记包含用户正在编写的内容的实时视图。自我验证创造奇迹，因此他们在发布数据之前纠正自己的错误。

Answer 2

无需解析结果或强制用户使用结构化格式，只需在 iframe 中显示内容即可：

<iframe id="user_html"></iframe>

<script>
document.getElementById("user_html").src = "data:text/html;charset=utf-8," + escape(content);
</script>

Answer 3

我专门构建了定制 CMS 系统多年，并且总是很幸运地结合了高质量的所见即所得、强大的前端验证和不懈的后端验证。

我总是倾向于 CKEditor，因为它是唯一可以在前端处理 Microsoft Word 输出的前端编辑器……这是我书中的必备工具。当然，其他人有来自 word 解决方案的粘贴，但祝用户使用它好运。实际上，由于 Microsoft Word 没有在 Tiny 中进行清理，我确实遇到过客户端过载数据库插入的情况。 HTML tidy 是一个很好的解决方案，可以在后端验证之前清理内容。

CK 有内置的模板和类，所以我使用它们来帮助我的用户格式化而不过度。在后端，我检查以确保他们没有尝试使用 CSS 进行任何有趣的业务，但这从来不是那群用户所关心的问题。给他们足够的（安全）功能，他们将永远不必变得流氓。

Answer 4

• 也许有点过头了，但是 HTML
  整洁
  如果你能使用它，可能会有所帮助。

• 使用所见即所得的方式，例如
  TinyMCE
  或 CKEditor 已内置清理方法。

Robert Koritnik 使用 Markdown 的建议似乎很棒，尤其是考虑到您只允许一些无害的格式标记。

我认为 CSS 无法阻止布局因开放 HTML 标签而被破坏，所以我可能会忘记这个想法。