如何使用jQuery创建RedCloth实时预览？

>使用JavaScript解析纺织品和jquery以将其粘贴到您的页面中
>使用Ajax调用从服务器获取解析后的纺织品,并使用jquery将其粘贴到页面中

我正在使用http://github.com/aaronchi/jrails用jquery替换scriptactulous,这使事情变得容易一些.

这是我做的：

我决定实现选项2,因为完全按照RedCloth显示的格式对我的应用程序来说至关重要.

我将以下内容添加到< head>我的页面：

<script>
var timeStamp1 = -1;
var timeStampSent1 = -1;
function delay() {
    setTimeout('preview()',1000);
}
function preview() {
    var n = new Date().getTime();
    // Ask for update if textarea was changed since this function last ran
    if (timeStamp1 != -1 && timeStamp1 != timeStampSent1) {
        $.post('/whatevers/ajax_update_preview',$('#textile').serialize(),null,"script");
        timeStampSent1 = timeStamp1;
    }
    delay(); // Run this again in 1000ms
}

// Important for letting you send ajax requests with jquery & rails
jQuery.ajaxSetup({  
    'beforeSend': function (xhr) {xhr.setRequestHeader("Accept","text/javascript")}  
});


$(document).ready(function(){
    // Event binding to watch for changes to the textarea
    $('#textile').keydown(function() {
      timeStamp1 = event.timeStamp
    });
});
</script>

在< body>中你显然需要：

<textarea id="textile" name="some_text"></textarea>
<div id="preview"></div>

您的控制器中需要以下内容：

class WhateversController < ApplicationController
  def ajax_update_preview
    txt = params[:some_text]
    render :update do |page|
      page.replace_html 'preview',:partial => 'preview',:object => txt
    end
  end

部分(_preview.html.haml;它在HAML中因为我使用的是你可以在ERB中执行它,并且你需要gem.config环境中的RedCloth gem.rb)：

- if live_textile_preview
  = RedCloth.new(live_textile_preview).to_html

最后,记得把它放在你的routes.rb中：

map.resources :whatevers,:collection => {:ajax_update_preview => :post}

我对javascript很缺乏经验(我只是把事情搞得一团糟),所以我确信这里的JS可以改进.

请注意,如果您有大量的并发用户,这对服务器资源来说是一个重大打击.如果是这种情况,你最好用javascript在客户端处理纺织品.