Атрибут contenteditable - редактирование и сохранение контента прямо на странице

09.08.18 ИТ / HTML 5783

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, но главное, что этот атрибут поддерживается почти во всех браузерах.