Используя HTML5, как я могу использовать contenteditable поля при отправке формы?

Question

Итак, у меня есть несколько элементов абзаца, которые динамически заполняются из БД. Я сделал элементы приемлемыми. Теперь я хочу отправить изменения обратно в БД через стандартную форму представления. Есть ли способ отправить спорные элементы обратно?

Answer 1

Вы должны использовать javascript так или иначе, он не будет работать как «стандартный» элемент формы, как это было бы с текстовой областью или тому подобным.Если хотите, вы можете создать скрытую текстовую область внутри своей формы, а в функции отправки формы скопировать innerHTML объекта contenteditable в значение текстовой области.В качестве альтернативы вы можете использовать ajax / xmlHttpRqeuest, чтобы отправить материал немного более вручную.

function copyContent () {
    document.getElementById("hiddenTextarea").value =  
        document.getElementById("myContentEditable").innerHTML;
    return true;
}


<form action='whatever' onsubmit='return copyContent()'>...

Answer 2

Если кому-то интересно, я исправил решение с VueJS для аналогичной проблемы.В моем случае у меня есть:

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

В «data» вы можете установить значение по умолчанию для mainMessage, а в моих методах:

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

Boostrap 4 класса для отображения нет.Это просто, и тогда вы можете получить значение поля contenteditable внутри "gift [main_message]" во время обычной отправки формы, например, AJAX не требуется.Я не заинтересован в форматировании, поэтому «innerText» работает лучше, чем «innerHTML» для меня.

Answer 3

НУЖНО, чтобы стандартная форма подачи?Если вы не можете или не хотите использовать форму с входными данными, вы можете попробовать AJAX (XMLHttpRequest + FormData), с помощью которого вы могли бы выполнять асинхронные запросы и лучше контролировать, как отображается ответ.

Если вы хотите, чтобы это было еще проще, попробуйте функцию jQuery $.ajax (также $.get и $.post).Он отправляет данные с использованием простых объектов JS.

Answer 4

Если вы используете jquery, вы можете отправить содержимое с помощью события .click () (т. Е. «Сохранить» или «отправить» ...)

В функции щелчка опубликуйте его в серверном скриптеиспользуя ajax "post", чтобы вставить его в вашу базу данных.

Пример