logo

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

HTML сегодня обладает очень богатыми функциональными возможностями и они постоянно расширяются. Например, можно сделать редактирование контента прямо на странице, без перехода в режим правки материала. Для этого достаточно применить атрибут contenteditable и написать небольшой код на JavaScript, который будет отправлять сохранения на сервер.

html-contenteditable

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

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

Последние статьи

Популярные разделы