当前位置：文江博客话题详情

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

发布于 2024-10-27 22:58:16 字数 153 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一萌ing 2024-11-03 22:58:16

推荐方式：

为以下对象创建一个 javascript 事件监听器 html 页面上的表单。通过 ajax 将输入提交到您的 Rails 应用，输入将在其中呈现（例如由稍后渲染数据库输出的同一个助手完成）。

使用 RedCloth/Textile 等标记语言来避免 XSS。对于您的用户来说，输入/理解也更容易！

您请求的方式：

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

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

示例：

假设您有一个带有文本区域的表单，以及带有 的预览区域 div

并且您正在使用 Prototype：

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.浏览器完成构建 DOM 树后，observe 将调用此代码。

Recommended way:

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).

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

Your requested way:

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

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

Example:

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'));
    }
  );
}

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

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.

回复收藏 0 原文