通过 Rails 中的表单将 <div contenteditable="true"> 的内容保存到我的数据库答案

【问题标题】：Save content of a <div contenteditable="true"> to my db through a form in Rails通过 Rails 中的表单将 <div contenteditable="true"> 的内容保存到我的数据库
【发布时间】：2019-10-01 15:51:48
【问题描述】：

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

设置如下：

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

<%= 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

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

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"}

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

【问题讨论】：

标签： javascript html ruby-on-rails

【解决方案1】：

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

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

此外，您应该使用hidden 输入而不是textarea 和display:none。

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

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

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

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

【讨论】：

感谢各位cmets和建议！（听输入的好主意）我一直在尝试更多的东西来调试这个，实际上我认为问题更深层次。不仅仅是函数没有被触发，或者值被交换。即使我取消隐藏文本区域并尝试手动更新它也不起作用。所以还有其他问题。一旦我发现我会再次通过你的答案。谢谢！
使用隐藏输入，而不是普通输入，显示：无。还要检查服务器日志，看看你在 params 哈希上收到了什么。
回到正轨。参数：内容没有被发送，所以我猜这个函数正在触发。我想我应该使用 form_for 助手而不是 form_with
两者都应该工作，_for 和_with，如果你有其他问题，它不会仅仅通过改变它来解决。 html 内容应位于params[:post][:content]。不是params[:content]。
它现在发送参数 :content，但为空。我是否应该使用您提供的 js 在 DOM 中实时查看值的更新？（当我检查时它仍然是空的）

【解决方案2】：

看起来您的表单在您的提交处理程序被触发之前正在刷新页面。您需要防止这种默认行为发生，您可以使用 onsubmit 事件来执行此操作，如下所示：

    function getContent(event){
        event.preventDefault()
        document.getElementById("content").value = document.getElementById("post_content").innerHTML;
    }

【讨论】：