Rails 3.1 实时预览

发布于 2024-12-04 23:27:14 字数 644 浏览 1 评论 0原文

我想要一个类似于 stackoverflow 上的实时预览。使用 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

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

原文

I would like to have a live preview similar to the one here on stackoverflow.
Using Rails 3.1 and RedCloth, I can not seem to understand how to make it work.

I tried making my own Ajax call such as this (inside my posts.js.coffee)

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

and having a function inside the controller

def preview
 @content = params[:post_content]

 respond_to do |f|
  f.js
 end
end

in preview.js.erb I put

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

I added the resource

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

but it doesn't work.
Any suggestions?

分享到QQ

分享到微博

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

发布评论

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

星星的轨迹 2024-12-11 23:27:14

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

gem "bluecloth", "~> 2.1.0"

客户端解析器我使用了 PageDown

然后我只需要添加一个小片段即可使其工作。

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

注意它没有消毒！

Thanks everyone for your words of wisdom,
eventually I did what you guys said, as it was far wiser to parse the preview on the client-side.
I switched to Markdown parser (server-side) bluecloth 2.1.0 and

gem "bluecloth", "~> 2.1.0"

and as for the client-side parser I used PageDown

then I only needed to add a little snippet to make it work.

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

notice it is not sanitized!

回复收藏 0 原文

下壹個目標 2024-12-11 23:27:14

您已指定“script”作为数据类型，这应该使响应作为JavaScript运行。通过以下方式检查响应是否正确：

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

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

You've specified "script" as the data type, which should make the response run as JavaScript. Check whether the response is correct by writing:

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

There are some important caveats with the "script" data type approach. As the jQuery.ajax docs say, "This will turn POSTs into GETs for remote-domain requests." I'm assuming this is a same-domain request, but that's worth keeping in mind.

回复收藏 0 原文

~没有更多了~