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

Question

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

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

Answer 1

推荐方式：

在html页面上为表单创建javascript event listener。提交输入呈现的输入via ajax to your rails app（例如，通过稍后将从数据库中呈现输出的同一帮助程序）。

使用RedCloth/Textile之类的标记语言来避免XSS。为用户输入/理解它也更容易！

您要求的方式：

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

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

示例：

假设您有一个带有textarea的表单<textarea id="text"></textarea>和一个带<div id="preview"></div>的预览区div，并且您正在使用Prototype：

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

这将检查textarea每250ms进行更改并将其输入复制到预览div。

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

Answer 2

你也可以考虑使用像textile或markdown这样的东西，这是用纯文本实现HTML标记的方法。