Contenteditable — редактирование контента «на лету»

Contenteditable - редактирование контента на лету

От автора: в этом и следующем уроках мы познакомимся с одним из новых атрибутов в HTML5 под названием contenteditable. Из самого названия понятно, что данный атрибут как-то связан с редактированием контента. И действительно, он позволяет редактировать содержимое элементов прямо на странице.

скачать исходникискачать урок

Думаю, вы уже догадались, где это может пригодиться и строите планы на использование этого атрибута. Использование данного атрибута очень удобно, скажем, для некоторых разделов админки сайта, где необходимо производить быстрое редактирование заголовков, настроек и т.п.

В этих уроках мы рассмотрим практическое использование атрибута contenteditable и реализуем редактирование настроек сайта буквально «на лету». Для примера воспользуемся простой таблицей в БД с настройками какого-либо сайта (дамп таблицы вы найдете в исходниках к уроку).

Создадим 3 файла: index.php, config.php и functions.php. В индексный файл будем выводить таблицу с настройками, в файле config.php будем хранить подключение к БД, а в файле functions.php опишем функции для работы с данными.

Подключимся к БД в файле config.php, используя необходимые настройки:

define("DBHOST", 'localhost');
define("DBUSER", 'root');
define("DBPASS", '');
define("DBNAME", 'crafter');

$db = @mysqli_connect(DBHOST, DBUSER, DBPASS, DBNAME) or die("Нет соединения с БД");
mysqli_set_charset($db, "utf8") or die("Не установлена кодировка соединения");

Сам файл конфигурации, а заодно и файл функций, подключим вверху файла index.php:

<?php
require_once 'config.php';
require_once 'functions.php';
?>

Теперь в файле функций опишем несложную функцию, получающую данные из таблицы настроек:

/**
* получение настроек
**/
function get_options(){
	global $db;
	$query = "SELECT * FROM options";
	$res = mysqli_query($db, $query);
	$options = array();
	while($row = mysqli_fetch_assoc($res)){
		$options[$row['id']] = $row;
	}
	return $options;
}

Получим результат работы функции в индексном файле в массив $options:

<?php
require_once 'config.php';
require_once 'functions.php';

$options = get_options();

?>

Далее в индексном файле создадим простую разметку и выведем в цикле настройки в таблицу. Заодно подключим библиотеку jQuery и наш будущий файл скрипта script.js, который не забудьте создать. В итоге содержимое индексного файла будет следующим:

<?php
require_once 'config.php';
require_once 'functions.php';

$options = get_options();

?>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Редактируемый контент</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	
<table class="zebra">
	<thead>
		<tr>
			<th>ID</th>
			<th>Системное название</th>
			<th>Название опции</th>
			<th>Значение</th>
		</tr>
	</thead>
	<tbody>
<?php foreach($options as $option): ?>
	<tr>
		<td><?=$option['id']?></td>
		<td><?=$option['title']?></td>
		<td><?=$option['name']?></td>
		<td><div class="edit" data-id="<?=$option['id']?>" contenteditable><?=$option['value']?></div></td>
	</tr>
<?php endforeach; ?>
	</tbody>
</table>

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Как видим, здесь мы в последнюю ячейку со значениями опций поместили элемент div с атрибутом contenteditable. Теперь содержимое данного элемента будет доступно для редактирования. Далее оформим таблицу с помощью стилей:

.zebra{
	width: 70%;
	margin: 20px auto;
	border-collapse: collapse;
}
.zebra th{
	background: #555;
	color: #fff;
	text-align: left;
}
.zebra .foot{
	background: #d5d5d5;
	color: #000;
	text-align: left;
}
.zebra input{
	width: 100%;
	transition: all .5s;
}
.zebra input:focus{
	box-shadow: 0 0 5px #000;
}
.zebra th,
.zebra td{
	border-bottom: 1px solid #ccc;
	padding: 5px;
	vertical-align: middle;
	padding: 12px 5px;
}
.zebra tr{
	transition: all .5s;
}
.zebra tr:hover{
	/*background: #f1f1f1;*/
}

.edit{
	padding: 3px;
	transition: all .5s;
	border: 1px solid rgba(82, 168, 236, .5);
}
.edit:focus{
	border: 1px solid rgba(82, 168, 236, 1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.9);
	outline: 0 none;
}

И, наконец, напишем несколько строк клиентского кода в файле script.js:

$(function(){

	var oldVal, newVal, id;

	$('.edit').keypress(function(e){
		if(e.which == 13){
			return false;
		}
	});

	$('.edit').focus(function(){
		oldVal = $(this).text();
		id = $(this).data('id');
		console.log(oldVal + '|' + id);
	});

});

Данными строками мы отслеживаем событие нажатия клавиш и при нажатии клавиши Enter мы запрещаем ее поведение по умолчанию, т.е. запрещаем перенос строк для редактируемого контента. Также при получении фокуса для того или иного элемента с настройкой, мы получаем текущее значение настройки и ID опции. ID нам понадобится в будущем для запроса к БД, а вот текущее значение настройки необходимо для того, чтобы сравнить его со значением после потери элементом фокуса. Если эти значения будут отличаться, значит, пользователь изменял настройку, и нам необходим запрос к БД для сохранения нового значения.

На этом мы завершим текущий урок. Удачи и до новых встреч!

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (18)

  1. Анатолий

    Благодарю Вас Андрей за ваши уроки, в этом году я посветил изучением ваших курсов…. хотел бы так же знать языки программирования как и вы )). Огромное Вам Спасибо!

  2. Игорь

    Где у вас кнопка перехода к следующему уроку?

    • Андрей Кудлай

      Такой кнопки нет и второй урок на сайте пока не публиковался, его можно найти пока только на нашем канале YouTube.

  3. Анатолий

    Доброго дня!
    Андрей, пытаюсь найти, какой плагин вы поставили для программы sublime text 2 для быстрого подключения jquery

    и какую комбинацию сделали ….
    Спасибо за помощь!

    • Андрей Кудлай

      Здравствуйте, Анатолий.
      Это не плагин, это сниппет, т.е. сохраненный код, который вызывается горячей клавишей (Tab). Здесь, к примеру, можно прочесть, как создать сниппет.

  4. masik

    Андрей, спасибо за прекрасные уроки.
    Твой сайт у меня на первом месте.
    И вдогонку вопрос:
    Можно ли сделать все это, но только на текстовых файлах?

    • Андрей Кудлай

      Пожалуйста)
      Да, в качестве хранилища данных, конечно же, может выступать текстовый файл. Если интересует вопрос реализации, то в одном из следующих уроков можно показать принцип реализации.

      • masik

        Андрей Кудлай Если интересует вопрос реализации, то в одном из следующих уроков можно показать принцип реализации.

        Да, очень интересует.
        Недавно, при переезде на новый хостинг потерял половину базы данных.
        Теперь решил освоить текстовые базы. С твоей помощью, конечно.
        С уважением…

  5. Екатерина

    Андрей здравствуйте, очень вам благодарна, ваш урок — ценный вклад в мои знания по web-программированию, подскажите пожалуйста а как теперь эти изменения в таблице сохранить в БД?

  6. Екатерина

    Простите, нашла. Шикарные уроки!!!

  7. ЖЕНЕК

    Подскажите можно как то сделать что бы в contenteditable был хотя бы 1 символ, т.е можно удалять все кроме одного.

    • Андрей Кудлай

      Можно. Как вариант, средствами JS считать количество символов в поле и, если значение станет равно единице, тогда с каждым нажатие кнопок, связанных с удалением (Backspace, Delete), сообщать пользователю о необходимости наличия хотя бы одного символа. Также можно и без JS просто на сервере проверять поле и, если оно окажется пустым — возвращать пользователю соответствующее сообщение. Есть и другие варианты решения.

  8. Дмитрий

    Отличный урок! Спасибо огромное, многое узнал — и по самой теме, и заодно по css и js! Очень радует, что есть видеоурок и исходники. Прикрутил все к своему сайту, все работает! Радует также подробность рассказа, все доступно и просто. Автору респект, продолжай доброе дело!!!

  9. Анатолий

    К сожалению,не понял,как сделать,чтобы данные сохранялись в базе данных. Ввожу значения,но после обновления страницы они не сохраняются. Подскажите пожалуйста,что делать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree