Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.

Ниже приводится HTML код редактируемой страницы:
<!DOCTYPE html>
<html lang="ru">
<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>
</html>

Как видим, каждый редактируемый текст заключен в тег с включенным свойством 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-е, которому мы так привыкли.

Демо версия нашего простого скрипта для редактирования HTML[5.
Скачать пример.