Атрибут contenteditable - редактирование и сохранение контента прямо на странице
HTML сегодня обладает очень богатыми функциональными возможностями и они постоянно расширяются. Например, можно сделать редактирование контента прямо на странице, без перехода в режим правки материала. Для этого достаточно применить атрибут contenteditable и написать небольшой код на JavaScript, который будет отправлять сохранения на сервер.
Как использовать атрибут contenteditable? Пример кода ниже:
<p class="content" contenteditable>Редактируемый контент</p>
Достаточно просто указать атрибут contenteditable без значения – и практически любой элемент таким образом может стать редактируемым. Но как сохранить сделанные изменения? Для этого необходимо использовать JavaScript и отправлять измененный контент на сервер при помощи Ajax.
Как может выглядеть код JavaScript для реализации функции сохранения контента? Например, если использовать библиотеку jQuery, то так:
// находим элемент с классом content и устанавливаем обработчик, который сработает при потере фокуса на элементе
$('.content').blur(function () {
// отправляем изменения на сервер, который должен вернуть ok, если изменения успешно сохранены
$.post('/ajax/handler.php', $(this).text(), function(data) {
if (data == 'ok') {
// в случае успеха, выводим информацию об этом
alert('Изменения успешно сохранены');
} else {
// в случае ошибки, выводим информацию об этом
alert('Произошла ошибка');
}
});
});
Таким образом, отредактировать текст прямо на странице и сохранить его совсем просто. Конечно, можно улучшить код и сделать небольшой визуальный редактор, который упростил бы работу с текстом. В Drupal, например, есть визуальный редактор Quick Edit, который позволяет редактировать контент прямо на странице, но это уже другая тема. Стоит взять на заметку, что в разных браузерах может отличаться реализация работы атрибута contenteditable, но главное, что этот атрибут поддерживается почти во всех браузерах.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку