通过 Rails 中的表单到我的数据库,javascript,html,ruby-on-rails"/>
时间戳

首页 > 解决方案 > 保存内容

通过 Rails 中的表单到我的数据库

javascript - 保存内容
通过 Rails 中的表单到我的数据库

问题描述

我正在尝试<div contenteditable="true">通过表单将 a 的内容保存到我的 Rails 应用程序中的数据库中，以便用户可以保存和更新它。

这是设置：

<div>用户获得一个包含with的视图（即 /posts/1）contenteditable= "true"。我添加了 javacript 给我一个“保存”按钮和一个隐藏字段，它将捕获 div 的内容以进行保存，如Can div with contenteditable=true be pass through form 中所建议的那样？. 然后将其更改为遵循同一问题中的建议。

<%= form_for @post do |form| %>                                                    
        <%= form.hidden_field :content %>
        <%= form.submit "Save" %>
    <% end %>
<div id="content" contenteditable="true">
    <p>Hello</p>
</div>
<script>
        document.getElementById('content').addEventListener('input', function(ev){
  document.getElementById('post_content').value = ev.target.innerHTML;
})
</script>

我正在寻找的行为是这种形式，一旦我按“保存”，将所有内容保存<div id="content">到@post.content

我已添加:content到我post_params的posts_controller.rb

def post_params
      params.require(:post).permit(:user_id, :content)
end

但它不起作用。@post.content一如既往nil。

服务器日志显示参数 :content 正在发送，但为空！

Started PATCH "/posts/3" for ::1 at 2019-10-01 19:36:24 +0200
Processing by PostsController#update as HTML
  Parameters: {"authenticity_token"=>"SRzcfcrBWOCdaWeJkp6rCRw94Ex2XLuVvnc3Bt1dFP1JFz36NCNTcxcuOVqzymlIGq9sveaE/+OkDnaHv3kJNQ==", "post"=>{"content"=>""}, "commit"=>"Save", "id"=>"3"}

任何猜测我做错了什么？提前致谢

标签： javascripthtmlruby-on-rails

解决方案

您以错误的方式设置值。您想将“post_content”值设置为“content”innerHTML。

document.getElemenetById('post_content') = document.getElementById('content').innerHTML;

此外，您应该使用hiddeninput 而不是textareawith display:none。

最后，确保该功能被触发。我认为“onsubmit”回调没有正确触发，因为 form_with 拦截表单提交并执行 ajax 请求。

就我个人而言，我会在 contenteditable 元素上收听input事件，这样您就不必依赖表单提交：

document.getElementById('content').addEventListener('input', function(ev){
  document.getElementById('post_content').value = ev.target.innerHTML;
})

现在，每次您更改 contenteditable 内容时，您都会立即更新输入。

推荐阅读