6

I've had problems with many of the WYSIWYG gems/plugins for Rails, so I'm building one myself using the RedCloth gem. I want users to see a live preview of their HTML-formatted text as they're filling out a form, but don't know how to do that using jQuery and RedCloth. Here's what I tried in application.js:

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

Not surprised this didn't work, since RedCloth.new probably can't be executed in the .js file, but don't know how else to dynamically format the text.

4

2 に答える 2

4

私は自分でこの問題に対処しなければなりませんでした。Geoff と Andy がほのめかしたように、2 つのオプションがあります。

  1. JavaScript を使用してテキスタイルを解析し、jquery を使用してページに貼り付けます
  2. Ajax 呼び出しを使用して解析済みのテキスタイルをサーバーから取得し、jquery を使用してそれをページに貼り付けます。

http://github.com/aaronchi/jrailsを使用して、scriptactulous を jquery に置き換えています。これにより、作業が少し楽になります。

これが私がしたことです：

オプション 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 で RedCloth gem を gem.config する必要があります):

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

最後に、これをroutes.rbに入れることを忘れないでください:

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

私は JavaScript にかなり慣れていないので (ちょっとハックしただけです)、ここの JS を改善できると確信しています。

多くの同時ユーザーがいる場合、これはサーバー リソースに大きな影響を与えることに注意してください。この場合は、クライアント側で javascript を使用してテキスタイルを処理する方がはるかに優れています。

于 2010-09-30T17:26:01.960 に答える
0

キーアップイベントまたはそれらの行に沿って何かでajax呼び出しを行いたい場合を除き、これをjavascriptで行う必要があると思います。

このリンクには、いくつかの優れたリソースがあります。Markdown、Textile などの JavaScript ライブラリ。アンカー参照

于 2010-08-16T23:56:28.973 に答える