使用 Rails 实时预览格式化的 HTML 表单输入

Question

我想要一个功能，可以预览一些带有 HTML 标签的文本，然后将文本存储在数据库中。我知道出于 XSS 安全原因，在数据库中允许 HTML 并不是一个好主意。有哪些方法可以实现这一目标？

我想要一个类似于 stackoverflow 中的功能，我们可以在其中格式化源代码。谢谢。

Answer 1

推荐方式：

创建一个 JavaScript 事件监听器 对于 html 页面上的表单。提交输入 通过 ajax 到您的 Rails 应用程序, ，其中输入被渲染（例如，由稍后渲染数据库输出的同一个助手）。

使用像这样的标记语言 红布/纺织品 以避免 XSS。对于您的用户来说，输入/理解也更容易！

您要求的方式：

创建一个 javascript 事件监听器并将表单/输入的内容写入另一个 div。

您需要的 JavaScript 取决于您使用的库（例如 Prototype 或 jQuery）。

例子：

假设您有一个带有文本区域的表单， <textarea id="text"></textarea>, ，以及一个预览区域 div <div id="preview"></div> 并且您正在使用原型：

document.observe("dom:loaded", function() {
  new Form.Element.Observer('text', 0.25, 
    function () {
      $('preview').update($F('text'));
    }
  );
}

这将每 250 毫秒检查一次文本区域是否有更改，并将其输入复制到预览 div 中。

实际上，您只需要调用函数内的代码 document.observe （从...开始 new Form.Element.Observer.... 。这 document.observe 将在浏览器完成 DOM 树构建后调用此代码。

Answer 2

还可以考虑使用纺织品或标记的东西，这是通过纯文本实现HTML标记的方法。