Question

如何为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 但它不再起作用了。

Answer 1

要在客户端执行此操作，只需在textbox元素上使用onfocus，这将创建一个事件侦听器。此函数将设置另一个事件侦听器，它将在keydown上激活并激活另一个函数。每当用户输入内容时，此最终函数将运行，并将访问文本框的内容并将其放入预览div中。

<!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>

将它发送到服务器是非常低效的，除非您正在进行语法高位，在这种情况下，您可以每隔10秒左右发送一次。

P.S。顺便说一下，如果你想做auto_html的东西，你偶尔可以把它发送到服务器去做。

Rails ajax：帮助创建文本预览auto_html

1 个答案: