Атрибут 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, но главное, что этот атрибут поддерживается почти во всех браузерах.
Последние статьи
- 04.06.20 Как самому перенести сайт на другой хостинг или тариф удаленно, без скачивания на компьютер
- 03.06.20 Какой тариф выбрать и на сколько заказывать хостинг чтобы сэкономить
- 02.06.20 Какой тип хостинга выбрать – обычный виртуальный, хостинг для CMS, VPS, VDS или выделенный сервер
- 01.06.20 Как сделать счетчик просмотров материала на сайте
- 10.05.20 Как в программировании быстро придумать правильные названия переменных, функций, классов, свойств, методов и т.д.