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

roo*_*ler 1 ajax ruby-on-rails live-preview

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

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

Mal*_*lte 6

推荐方式:

在html页面上为表单创建一个javascript事件监听器.通过ajax将输入提交到rails应用程序,其中输入被呈现(例如,通过稍后将从数据库呈现输出的同一帮助程序).

使用像RedCloth/Textile这样的标记语言来避免XSS.为用户输入/理解它也更容易!

您要求的方式:

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

您需要的javascript取决于您使用的库(例如Prototype或jQuery).

例:

假设你有一个带有textarea的表单<textarea id="text"></textarea>,以及一个预览区div,<div id="preview"></div>你正在使用Prototype:

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

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

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