Сохранить содержимоек моей БД через форму в Rails

Question

Я пытаюсь сделать содержимое <div contenteditable="true"> сохраненным в БД в моем приложении Rails через форму, чтобы он мог быть сохранен и обновлен пользователем.

Вот настройка:

Пользователь получает представление (т.е. / posts / 1), которое включает <div> с contenteditable= "true". Я добавил JavaScript, чтобы дать мне кнопку «Сохранить» и скрытое поле, которое будет захватывать содержимое div для сохранения, как предложено в Может ли div с contenteditable = true передаваться через форму? . Затем измените его, следуя указаниям, изложенным в этом же вопросе.

<%= 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 как всегда.

Журналы сервера показывают, что параметр: содержимое отправляется, но пусто!

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

Есть какие-нибудь предположения о том, что я делаю неправильно? Заранее спасибо

Answer 1

Вы устанавливаете значение неправильно. Вы хотите установить значение "post_content" для "content" innerHTML.

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

Кроме того, вы должны использовать hidden вместо textarea с display:none.

И наконец, убедитесь, что функция запускается. Я не думаю, что обратный вызов «onsubmit» запускается должным образом, поскольку form_with перехватывает отправку формы и выполняет запрос ajax.

Лично я бы прослушал событие input в элементе contenteditable, поэтому вы неt зависит от отправки формы:

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

Теперь каждый раз, когда вы изменяете контент, содержание которого вы удовлетворяете, вы мгновенно обновляете ввод.

Answer 2

Похоже, что ваша форма обновляет страницу, прежде чем ваш обработчик отправки будет запущен. Вы захотите предотвратить это поведение по умолчанию, что вы можете сделать с событием onsubmit, например:

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