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

时间:2010-08-16 23:44:22

标签: jquery ruby-on-rails redcloth live-preview

我在使用Rails的许多WYSIWYG宝石/插件时遇到了问题,所以我自己使用RedCloth gem构建了一个。我希望用户在填写表单时看到HTML格式文本的实时预览,但不知道如何使用jQuery和RedCloth。这是我在application.js中尝试的内容:

$('#comment').keyup(function(){
  var formatted = RedCloth.new($(this).val()).to_html;
  $('#preview').html(formatted);
});

这并不奇怪,因为RedCloth.new可能无法在.js文件中执行,但不知道如何动态格式化文本。

2 个答案:

答案 0 :(得分:4)

我必须自己处理这个问题。你有两个选择,正如Geoff& amp;安迪:

  1. 使用JavaScript解析纺织品和jquery以将其粘贴到您的页面中
  2. 使用Ajax调用从服务器获取已解析的纺织品并使用jquery将其粘贴到页面中
  3. 我正在使用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中完成,你需要在environment.rb中使用gem.config和RedCloth gem):

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

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

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

    我对javascript缺乏经验(我只是在一起破解),所以我确信这里的JS可以改进。

    请注意,如果您有大量的并发用户,这会对服务器资源造成重大影响。如果是这种情况,您最好使用javascript在客户端处理纺织品。

答案 1 :(得分:0)

我认为你需要在javascript中执行此操作,除非你想对keyup事件或类似事件进行ajax调用。

此链接有一些很好的资源:JavaScript libraries for Markdown, Textile and others; Anchor references