Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.
Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.
Ниже приводится HTML код редактируемой страницы:
<body>
<div id="wrap">
<h1 id="item1_title" contenteditable="true" ><a href="http://jquery.ua-opt.com/htm5-text-edit.html">Простой jquery скрипт для редактирования HTML5 текста и его сохранения с помощью ajax</a></h1>
<h3 id="item1_subtitle" contenteditable="true">Демонстрация работы <i>редактируемого HTML5 текста</i>, с последующей передачей и записью посредством Jquery-Ajax-Php-mysql.</h3>
<div id="item1_content" contenteditable="true">Пример редактируемого текста html 5. Для редактирования нажмите мышкой на любой текст. Для записи просто нажмите мышкой в другое место или на кнопку сохранить.</div>
<button id="save">Сохранить</button>
</div>
</body>
Как видим, каждый редактируемый текст заключен в тег с включенным свойством contenteditable — фишкой HTML5, которая позволяет редактировать текст прямо в браузере. Для сохранения на сервере нужно точно идентифицировать редактируемый текст, поэтому id у нас содержит идентификатор материала и поле базы данных, разделенных нижним подчеркиванием, например — id=«item1_title».
Кнопка «сохранить» тут для тех, кто привык нажимать на кнопку сохранить. Никакой особой нагрузки не выполняет, так как, при нажатии на кнопке наш текст теряет фокус и сохраняется (если изменен).
В заголовке нашей страницы подключаем style.css и jquery:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Простой скрипт jquery для редактирования текста и сохранением с помощью ajax</title>
<link rel="stylesheet" href="css/style.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Далее идет собственно и наш скрипт:
<script>
var contentold={}; //объявляем переменную для хранения неизменного текста
function savedata(elementidsave,contentsave) { //функция для сохранения отредактированного текста с помощью ajax
$.ajax({
url: 'save.php', //url который обрабатывает и сохраняет наш текст
type: 'POST',
data: {
content: contentsave, //наш пост запрос
id:elementidsave
},
success:function (data) { //получили ответ от сервера - обрабатываем
if (data == contentsave) //сервер прислал нам отредактированный текст, значит всё ok
{
$(elementidsave).html(data); //записываем присланные данные от сервера в элемент, который редактировался
$('<div id="status">Данные успешно сохранены:'+data+'</div>') //выводим сообщение об успешном ответе сервера
.insertAfter('#'+elementidsave)
.addClass("success")
.fadeIn('fast')
.delay(1000)
.fadeOut('slow', function() {this.remove();}); //уничтожаем элемент
}
else
{
$('<div id="status">Запрос завершился ошибкой:'+data+'</div>') // выводим данные про ошибку
.insertAfter('#'+elementidsave)
.addClass("error")
.fadeIn('fast')
.delay(3000)
.fadeOut('slow', function() {this.remove();}); //уничтожаем элемент
}
}
});
}
$(document).ready(function() {
$('[contenteditable="true"]') //редактируемый элемент
.mousedown(function (e) //обрабатываем событие нажатие мышки
{
e.stopPropagation();
elementid=this.id;
contentold[elementid]=$(this).html(); //текст до редактирования
$(this).bind('keydown', function(e) { //обработчик нажатия Escape
if(e.keyCode==27){
e.preventDefault();
$(this).html(contentold[elementid]); //возвращаем текст до редактирования
}
});
$("#save").show(); //показываем кнопку "сохранить"
})
.blur(function (event) //обрабатываем событие потери фокуса
{
var elementidsave=this.id; //id элемента потерявшего фокус
var contentsave = $(this).html(); //текст для сохранения
event.stopImmediatePropagation();
if (elementid===elementidsave) // если id не совпадает с id элемента, потерявшего фокус,
{$("#save").hide(); } // значит фокус в редактируемом элементе, кнопку не прячем
if (contentsave!=contentold[elementidsave]) //если текст изменился
{
savedata(elementidsave,contentsave); //отправляем на сервер
}
});
});
</script>
Принимаем наш отредактированный текст на сервере — файл save.php
<?php
//include("db.php");
$id= filter_input (INPUT_POST , 'id' , FILTER_SANITIZE_STRING );
$id=explode('_', $id);
$itemid=mysql_real_escape_string($id[0]);
$itempole=mysql_real_escape_string($id[1]);
$content = $_POST['content']; //get posted data
//$content = mysql_real_escape_string($content); //escape string
//$sql = "UPDATE content SET $itempole = '$content' WHERE element_id = '$itemid' ";
if ($content)
{
print $content;
}
else print '№1';
?>
Особенно удобен наш редактор для табличных данных (например прайс), где не нужно текстовое оформление, а необходимо быстро поправить, либо внести новые данные (модернизируем скрипт). Для себя я модернизирую скрипт, чтобы вносить, заполнять базу данных товаров. Заполнять базу таким способом будет также удобно, как в Excel-е, которому мы так привыкли.
Демо версия нашего простого редактора HTML5.
Скачать исходники.
Автор: turone
