如何将form_for与非输入元素一起使用？

Question

I want to use Ace Editor in my view for creating a post object, instead of a textarea, but Ace Editor requires the use of a <div> to contain its content. 我想在视图中使用Ace编辑器来创建post对象，而不是文本区域，但是Ace编辑器需要使用<div>来包含其内容。 I'm new to Ruby on Rails 4 I'm trying to figure out how I can securely submit user input using the Ace Editor and redirect the user to the page that shows the post after it's been submitted. 我是Ruby on Rails 4的新手，我试图弄清楚如何使用Ace编辑器安全地提交用户输入，并将用户重定向到提交后显示该页面的页面。 Here's my current form for submitting a post that does NOT yet use the Ace Editor <div> ... 这是我当前的表单，用于提交尚未使用Ace Editor <div>的帖子...

<%= form_for(@post) do |f| %>
  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
     <!-- I'd like to replace this text_area with the ace editor div-->
    <%= f.text_area :description %> 
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

How can I replace the f.text_area element with a <div> and include it's contents in the form's post request? 如何使用<div>替换f.text_area元素并将其内容包含在表单的发布请求中？

Answer 1

With the new version of ace you can use textarea too 使用新版ace，您也可以使用textarea

see http://jsbin.com/jodeyugenu/1/edit 参见http://jsbin.com/jodeyugenu/1/edit

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script> <style> #ta { position: absolute; top: 0; left: 0; right: 0; bottom: 0;} </style> </head> <body> <form id="myForm"> <div style="position:relative;height:200px;width:300px"> <textarea id="ta">text</textarea> </div> <input type="submit" value="submit" > </form> </body> <script> var textareaEl = document.getElementById("ta"); // update textarea value before submitting var form = textareaEl.form form.addEventListener("submit", function() { textareaEl.style.visibility = "hidden" textareaEl.value = editor.getValue() form.appendChild(textareaEl) }); // create editor and set id for it editor = ace.edit(textareaEl) editor.container.id = "ta" // add a keyboard shortcut for submitting editor.commands.addCommand({ name: "submit", exec: function() { form.submit() }, bindKey: "Ctrl-Enter" }) </script> </html>

如何将form_for与非输入元素一起使用？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-15 09:59:20

如何将form_for与非输入元素一起使用？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-15 09:59:20

解决方案1
1 已采纳 2014-11-15 09:59:20