Rails 3.1 实时预览

Posted 2023-02-22

【中文标题】Rails 3.1 实时预览

【英文标题】：Rails 3.1 live preview

【发布时间】：2011-11-19 17:52:22

【问题描述】：

我想要一个类似于 *** 上的实时预览。 使用 Rails 3.1 和 RedCloth，我似乎无法理解如何使其工作。

我尝试进行这样的自己的 Ajax 调用（在我的 posts.js.coffee 中）

$ ->
 $('#post_content').keyup ->
  $.post('posts/preview', $('#post_content').val(), null, "script")

并且在控制器内部有一个功能

def preview
 @content = params[:post_content]

 respond_to do |f|
  f.js
 end
end

在 preview.js.erb 我放了

$("#preview").html("<% raw RedCloth.new(@content).to_html %>");

我添加了资源

resources :post do
 post 'preview', :on => :collection
end

但它不起作用。 有什么建议吗？

【问题讨论】：

Ajax 对于像 Stack Overflow 这样的实时预览会有太多的延迟。你想要的是一个 javascript 降价库。请参阅***.com/questions/134235/…（请注意，您也可以使用 ExecJS 在服务器上运行相同的降价库，当然它与 Rails 3.1 捆绑在一起。）

我相信这个问题是相关的：***.com/questions/5311247/…

Guy，将来最好包含一些调试信息。 为什么它不起作用或者它做了什么这是出乎意料的？

【参考方案1】：

感谢大家的智慧之言， 最终我按照你们所说的做了，因为在客户端解析预览要明智得多。 我切换到 Markdown 解析器（服务器端）bluecloth 2.1.0 和

gem "bluecloth", "~> 2.1.0"

至于我使用的客户端解析器PageDown

然后我只需要添加一点 sn-p 就可以了。

converter = new Markdown.Converter()
$ ->
  if $('#post_content').val() isnt ''
   $('.preview').empty().append(converter.makeHtml($('#post_content').val()))
$ ->
  $('#post_content').keyup ->
    $('.preview').empty().append(converter.makeHtml($('#post_content').val()))

注意它没有经过消毒！

【讨论】：

嘿，伙计。我正在尝试和你做同样的事情。我发现使用这个解析器很棒！除了，当我将converter.makeHtml(string) 写入文件例如main_file.js 时，它会导致稍后运行的其他脚本无法工作。你找到过这个吗？

【参考方案2】：

您已将 "script" 指定为数据类型，应该使响应以 JavaScript 运行。通过写法检查响应是否正确：

$.post('posts/preview', $('#post_content').val(), ((js) -> console.log js), "script")

"script" 数据类型方法有一些重要的注意事项。正如jQuery.ajax 文档所说，“这会将 POST 转换为远程域请求的 GET。”我假设这是一个同域请求，但这值得牢记。