Простой Jquery редактор для редактирования HTML5 текста и сохранения с помощью ajax

в 12:54, , рубрики: html, html5, javascript, jquery plugins, Веб-разработка

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов 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

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js