使用HTML表单输入使用Rails的活preVIEW [英] Live preview of formatted HTML form input with Rails

问题描述

我想$ P $的pviewing HTML标记一些文本，然后存储在数据库中的文本的功能。我知道这是不是一个好主意，让HTML数据库，为XSS安全原因。什么是实现这一目标的方法是什么？

I want a feature of previewing some text with HTML tags and then storing the text in database. I know it is not a good idea to allow HTML in database, for XSS security reasons. What are the ways to achieve this?

我想一个类似于我们在计算器，在这里我们可以格式化我们的源$ C ​​$ CS的功能。谢谢你。

I want a feature similar to the one we have in stackoverflow, where we can format our sourcecodes. Thanks.

推荐答案

推荐方式：

创建 JavaScript事件侦听器对你的HTML页面的形式。提交通过AJAX输入到你的Rails应用，其中输入被渲染（例如由相同的辅助，将稍后呈现从数据库的输出）。

Create an javascript event listener for the form on your html-page. Submit the input via ajax to your rails app, where the input gets rendered (for example by the same helper that will later render the output from the database).

使用一种标记语言，如 RedCloth /纺织，以避免XSS。它也更容易输入/理解你的用户！

Use a markup language like RedCloth/Textile to avoid XSS. It's also easier to type/understand for your users!

您请求的方式：

创建JavaScript事件监听器，并写入的形式/输入的内容复制到另一个分区。

Create an javascript event listener and write the contents of the form/input to another div.

你需要的JavaScript取决于你使用（原型或jQuery的，例如）的库。

The javascript you'll need depends on which library you use (Prototype or jQuery, for example).

示例：

假设你有一个textarea的形式，＆LT; textarea的ID =文本＆GT;＆LT; / textarea的＆GT; 和preVIEW区格与＆LT; D​​IV ID =preVIEW＆GT;＆LT; / DIV＆GT; 键，您使用的原型：

Suppose you have a form with a textarea, <textarea id="text"></textarea>, and a preview area div with <div id="preview"></div> and you are using Prototype:

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

这将检查textarea的每250毫秒更改和复制其输入到preVIEW股利。

This will check the textarea every 250ms for changes and copy its input into the preview div.

其实，你只需要一个被称为与 document.observe 函数内部的code（从新Form.Element。观察... 的 document.observe

Actually, you just need the code inside the function that is called with document.observe (starting with new Form.Element.Observer.... The document.observe will call this code after the browser has finished building the DOM-tree.

这篇关于使用HTML表单输入使用Rails的活preVIEW的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！