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

How do I use form_for with non-input elements?

本文关键字：元素 输入 一起 form for      更新时间：2023-09-26

我想在我的视图中使用 Ace Editor 来创建帖子对象，而不是文本区域，但 Ace Editor 需要使用<div>来包含其内容。我是 Ruby on Rails 4 的新手，我正在尝试弄清楚如何使用 Ace 编辑器安全地提交用户输入，并在提交帖子后将用户重定向到显示帖子的页面。这是我目前提交尚未使用 Ace 编辑器<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 %>

如何将 f.text_area 元素替换为<div>并将其内容包含在表单的 post 请求中？

使用新版本的ace，您也可以使用textarea

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

相关文章：