2011-06-27 4 views
0

auto_htmlのプレビューフィールドを作成するにはどうすればよいですか?Rails ajax:テキストを作成するヘルプpreivew auto_html

マイコントローラ:

def new 
    @post = Post.new 

    respond_to do |format| 
     format.html # new.html.erb 
     format.xml { render :xml => @post } 
    end 
    end 

def preview 
    post = Post.new(params[:comment]) 
    render :text => post.body_html 
end 

マイビュー:

<%= form_for(@post) do |f| %> 
    <% if @post.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2> 

     <ul> 
     <% @post.errors.full_messages.each do |msg| %> 
     <li><%= msg %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 

    <div class="field"> 
    <%= f.label :titel %><br /> 
    <%= f.text_field :titel %> 
    </div> 
    <div class="field"> 
    <%= f.label :body_html %><br /> 
    <%= f.text_area :body_html %> 
    </div> 
    <div class="field"> 
    <%= f.label :up_votes %><br /> 
    <%= f.text_field :up_votes %> 
    </div> 
    <div class="field"> 
    <%= f.label :down_votes %><br /> 
    <%= f.text_field :down_votes %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 
<div id="post-preview" style="width:400px;border:1px solid black; height:500px;"></div> 

私はタイトルとbody_htmlのプレビューを作りたいです。 例body_html text_areaに「Hello helloe helloe」と入力すると、下のdivで瞬時にプレビューされます。

ここにこの機能の例があります:http://rors.org/2010/08/15/auto_html.html これはもう機能しません。

+0

ユースケースの複雑さによっては、クライアントサイドでこれを行うことをお勧めします。特に、キーストロークイベントを更新したい場合。 – polarblau

+0

これはJqueryでどのように行われますか? –

+0

これは依存しています;) - テキストボックスがあり、ユーザーが入力したテキスト**と** HTMLの下にプレビューすると仮定できますか?マークダウンやテキスタイルなどはありませんか? (私はauto_html、FYIに精通していません) – polarblau

答えて

1

クライアント側で行うには、イベントリスナーを作成するtextbox要素でonfocusを使用します。この関数は、keydownでアクティブになり、別の関数をアクティブにする別のイベントリスナーを設定します。この最後の関数は、ユーザーが何かを入力するたびに実行され、テキストボックスの内容にアクセスしてプレビューdivに配置します。あなたは、構文highlitingをやっている。その場合には、あなたが10秒ごとかそこらのそれを送ることができない限り、サーバーにオフにそれを送信する

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function keypressed(form) { 
    text = form.textbox.value 
    //do any processing on text desired 
    preview.innerHTML = text; 
} 

</script> 
</head> 
<body> 
<form name="myform" action="blah.cgi"> 
<input type="text" id="textbox" name="textbox" onkeydown="keypressed(this.form);"/> 
<input type="submit" value="submit" /> 
</form> 
<br /> 
<br /> 
<div id="preview"> 
</div> 
</body> 
</html> 

は、驚くほど非効率的です。

P.S.ちなみに、auto_htmlの処理をしたいのであれば、それをサーバーに送信することがあります。

関連する問題