Как сохранить данные из HTML contenteditable на сервере в PHP?
Доброго времени суток!
В данной статье мы рассмотрим с Вами один из способов отправки на сервер содержимого
div блока с атрибутом contenteditable.
contenteditable — это атрибут, который будучи применный к произвольному html-элементу делает из него редактируемое
поле с функциями форматирования. Вы можете, например, скопировать страницу с любого сайта, и вставить ее в блок
с данным атрибутом — и форматирование сохраниться.
А теперь рассмотрим как можно это реализовать.
Код ниже представляет базовую форму для добавления статьи на сайте.
<form action="/post" method="post">
<h3 class="pb-3">Новая статья</h3>
<div class="mb-3">
<label for="newsTitle" class="form-label">Заголовок</label>
<input type="text" class="form-control" id="newsTitle" name="title" value="" placeholder="Type title here">
</div>
<div class="mb-3">
<label for="formatted_input" class="form-label">Текст</label>
<!-- Наш блок с редактируемым текстом -->
<div id="formatted_input" contenteditable style="border:solid 1px gray;padding:1em;width:100%;min-height:2em;"></div>
<!-- Скрытое поле, которое будет содержать текст из блока выше -->
<input type="hidden" name="content" value="" id="formatted_input_value"/>
</div>
<div class="mb-3">
<input type="submit" value="Добавить" class="btn btn-success" name="postSubmit"/>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', () => {
const editor = document.querySelector('#formatted_input');
const post_content = document.querySelector('#formatted_input_value');
// когда редактируется блок, его содержимое попадает в скрытое поле
editor.addEventListener('input', () => {
post_content.value = editor.innerHTML.trim();
});
});
</script>
Таким образом, текст из блока contenteditable попадает в скрытое поле, которое при отправке формы
обычным образом отправляется на сервер.
