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

Дата публикации: 2014-07-08

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Создадим 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("Не установлена кодировка соединения");

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';
?>

<?php

require_once 'config.php';

require_once 'functions.php';

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

/**
* получение настроек
**/
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;
}

/**

* получение настроек

**/

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();

?>

<?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>

<?php

require_once 'config.php';

require_once 'functions.php';

$options = get_options();

<!doctype html>

<head>

<title>Редактируемый контент</title>

</head>

<body>

<thead>

<tr>

<th>Системное название</th>

<th>Название опции</th>

<th>Значение</th>

</tr>

</thead>

<tbody>

<?php foreach($options as $option): ?>

<tr>

<td><div class="edit" data-id="<?=$option['id']?>" contenteditable><?=$option['value']?></div></td>

</tr>

<?php endforeach; ?>

</tbody>

</table>

</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;
}

.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);
	});

});

$(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 нам понадобится в будущем для запроса к БД, а вот текущее значение настройки необходимо для того, чтобы сравнить его со значением после потери элементом фокуса. Если эти значения будут отличаться, значит, пользователь изменял настройку, и нам необходим запрос к БД для сохранения нового значения.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее