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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Создадим 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';

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс