Jeditable — плагин для jQuery.

Перевод. Оригинал здесь.

Как работает этот редактор?

Обычно все происходит так. Пользователь кликает на блоке текста страницы. Блок текста становится формой. Пользователь редактирует содержимое  и нажимает кнопку «Отправить». Новый текст отправляется на сервер и сохраняется так. Форма снова преобразуется в блок текста.

Простой пример использования

Пока читаете — можете воспользоваться live demo. Для примера будем использовать следующий html-код:

<div id="div_1">Dolor</div>
<div id="div_2">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</div>

Единственный обязательный параметр — это адрес, на который будет отправляться отредактированный текст (он может принимать форму не только адреса, об этом чуть ниже - прим. переводчика)

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

Код, приведенный выше, делает следующее: элементы, имеющие класс edit, становятся редактируемой формой. Редактирование начинается одинарного с клика мышкой по этому элементу. Элемент редактирования в полученной форме имеет тип text. Ширина и длинна элемента совпадает с размерами оригинального текстового блока. Если пользователь кликнет мышкой за пределами формы — изменения отменяются и форма удалится. Такое же действие произойдет, если пользователь нажмет ESC. Когда пользователь нажмет на ENTER - происходит отправка измененных данных формы скрипту save.php на сайте www.example.com.

Не плохо для одной строчки, да? Давайте добавим несколько параметров.

Используем элемент textarea для блоков, имеющих класс edit_area.  Они также будут иметь изображение, которое будет появляться в процессе загрузки данных на сервер. Элементы с классом edit будут иметь вместо изображения текст Saving… В качестве бонуса давайте добавим подсказки. Они подскажут пользователям что нужно сделать.

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
     });
     $('.edit_area').editable('http://www.example.com/save.php', {
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="img/indicator.gif" alt="" />',
         tooltip   : 'Click to edit...'
     });
 });

Этих двух примеров достаточно для большинства нужд. Для тех, кому этого мало — давайте продолжим…

Что отправляется на сервер?

После сабмита данных, они отправляются на сервер методом POST:

id=elements_id&value=user_edited_content

В некоторых случаях Вам захочется переименовать отправляемые параметры. Например, Вы хотите, чтобы отправилась следующая строка:

elementid=elements_id&newvalue=user_edited_content

Для этого необходимо добавить два параметра:

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         id   : 'elementid',
         name : 'newvalue'
     });
 });

Использование совместно с Textile, Markdown,ReST, WiKi и др.

Если содержимое элементов edit_area, например, содержит данные с разметкой типа Wiki, Markdown, Вы захотите редактировать только текст в разметке, а не исходный html-текст содержимого блока. Для этого можно использовать параметр loadurl, который определяет url, с которого будут получены данные для редактирования.

$(document).ready(function() {
     $('.edit_area').editable('http://www.example.com/save.php', {
         loadurl  : 'http://www.example.com/load.php',
         type    : 'textarea',
         submit  : 'OK'
     });
 });

В этом примере load.php должен вернуть содержимое блока без html-разметки. Однако,  save.php возвращает текст с html-разметкой. После сохранения браузер отображает те данные, которые вернул скрипт save.php. Есть еще один вариант — можно передать разметку в параметре data.

Как использовать раскрывающийся список (select)?

Вы можете использовать раскрывающийся список, установив значение параметра type в значение select. Список строиться из массива, закодированного в формате JSON. Этот массив может быть взят из параметра data или получен с внешнего источника, указанного в loadurl. Значение ключей массива для значений тэгов <option>. Значение элементов массива — элементы списка.

Закодированный массив в формате JSON выглядит примерно так:

{‘E’:'Letter E’,'F’:'Letter F’,'G’:'Letter G’, ‘selected’:'F’}

Обратите внимание на последний элемент. Он специальный — указывает Jeditable, какой параметр по-умолчанию указывается как выбранный. Давайте рассмотрим два простых примера. В первом примере мы рассмотрим передачу данных через параметр data.

$('.editable').editable('http://www.example.com/save.php', {
     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
     type   : 'select',
     submit : 'OK'
 });

А что если Вам необходимо получать динамический список? Тогда Вы можете получить его с внешнего url. Предположим, что мы имеем такой скрипт PHP:

<!--?php  /* http://www.example.com/json.php */  $array['E'] =  'Letter E';  $array['F'] =  'Letter F';  $array['G'] =  'Letter G';  $array['selected'] =  'F';  print json_encode($array);  ?-->

Затем вместо параметра data воспользуемся параметром loadurl:

$('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type   : 'select',
     submit : 'OK'
 });

Но некоторые обеспокоены лишними запросами к серверу. Есть еще один вариант: объединить два способа. Давайте выведем массив прямо в код JavaScript:

<!--?php  $array['E'] =  'Letter E';  $array['F'] =  'Letter F';  $array['G'] =  'Letter G';  $array['selected'] =  'F';  ?-->

 

$('.editable').editable('http://www.example.com/save.php', {
     data : '<!--?php print  json_encode($array); ?-->',
     type   : 'select',
     submit : 'OK'
 });

Как стилизовать элементы?

Вы можете стилизовать элемент ввода, используя параметры cssclass и style. Параметр cssclass предполагает наличие класса в Вашем файле CSS. Параметр style может содержать любое валидное определение стиля. Рассмотрите следующие примеры:

$('.editable').editable('http://www.example.com/save.php', {
     cssclass : 'someclass'
 });

 $('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'display: inline'
 });

Оба параметра могут иметь специальное значение inherit. Установленное в параметре cssclass, оно указывает форме наследовать класс родительского элемента. Установленное в параметре style, оно указывает форме наследовать одноименный атрибут (style) родительского элемента.

Следующий пример сделает из слова ipsum раскрывающийся список. Этот список унаследует стиль от элемента <span>. Это будет display: inline.

Lorem <span style="display: inline;">ipsum</span> dolor
 sit amet.

 

$('.editable').editable('http://www.example.com/save.php', {
     loadurl : 'http://www.example.com/json.php',
     type    : 'select',
     submit  : 'OK',
     style   : 'inherit'
 });

Отправка данных с использованием функции

Некоторые люди хотят контролировать абсолютно все. Не проблема! Вы можете получить полный контроль над Ajax запросами. Просто замените url на функцию. Остальные параметры остаются без изменений, как и в версии с callback.

$('.editable').editable(function(value, settings) {
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
     type    : 'textarea',
     submit  : 'OK',
 });

Стоит отметить, что функция должна возвращать строку. Обычно это отредактированный текст. Он будет показан на странице после окончания редактирования.

Параметры ссылки

(String) method: Метод используется, когда отправляется отредактированный контент. По умолчанию значение POST. Скорее всего Вы будете использовать POST или PUT. Последний совместим с Rails.

(Function) callback: Функция вызывается после отправки данных формы. Она получает два параметра. Value содержит отправленный текст. Settings содержит настройки плагина. Внутри функции this ссылается на оригинал редактируемого элемента.

$('.editable').editable('http://www.example.com/save.php', {
     type     : 'textarea',
     submit   : 'OK',
     callback : function(value, settings) {
         console.log(this);
         console.log(value);
         console.log(settings);
     }
 });

(String) name:  Имя отправляемого параметра, который содержит отредактированный текст. Значение по умолчанию value.

 $('.editable').editable('http://www.example.com/save.php', {
     name     : 'new_value'
 });

(String) id: Имя отправляемого параметра, который содержит id редактируемого элемента. Значение по умолчанию id.

$('.editable').editable('http://www.example.com/save.php', {
     id     : 'element_id'
 });

(Mixed) submitdata: Дополнительный параметр. Может содержать как данные, так и функцию, возвращаемую данные.

$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : {foo: "bar"};
});
$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : function(value, settings) {
       return {foo: "bar"};
   }
});

(String) type: Тип элемента для ввода данных. По умолчанию это один из перечисленных: text, textarea или select. Дополнительные типы можно добавить, используя пользовательское API.

(Integer) rows: Количество строк в textarea.

(Integer) cols: Количество столбцов в textarea.

(Integer) height: Высота элемента ввода в пикселях. Знаечние по умолчанию auto. Это означает, что высота вычисляется автоматически. Можно установить значение none.

(Integer) width: Ширина элемента ввода в пикселях. Значение по умолчанию auto. Это означает, что ширина вычисляется автоматически. Можно установить значение none.

(String) loadurl: Обычно содержимое формы будет такое же, как и содержимое редактируемого элемента. Однако, этот параметр позволит загрузить данные с внешнего URL.

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"
});

Стоит заметить, что идентификатор редактируемого элемента будет автоматически добавлен к запросу. Например, URL может выглядеть так:

http://www.example.com/load.php?id=element_id

(String) loadtype: Тип запроса при использовании loadurl. По умолчанию используется GET. Вы так же можете использовать GET или POST.

(Mixed) loaddata: Дополнительный параметр при использовании loadurl. Может содержать как данные, так и функцию, возвращаемую данные.

$(".editable").editable("http://www.example.com/save.php";, {
   loaddata : {foo: "bar"};
});
$(".editable").editable("http://www.example.com/save.php";, {
   loaddata : function(value, settings) {
       return {foo: "bar"};
   }
});

(Mixed) data: Данные формы, передающиеся для редактирования. Может содержать как строку, так и функцию, возвращаемую строку. Может быть полезно. когда Вам надо изменить данные перед их редактированием.

$(".editable").editable("http://www.example.com/save.php";, {
   data : "Lorem ipsum";
});
$(".editable").editable("http://www.example.com/save.php";, {
    data: function(value, settings) {
      /* Convert <br> to newline. */
      var retval = value.replace(/<br[\s\/]?>/gi, '\n');
      return retval;
    }
});

Обработка событий

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

  • onblur : cancel  -  Клик за пределами редактируемой области отменяет изменения. Нажатие на кнопку отправки отсылает данные.
  • onblur : submit - Клик за пределами редактируемой области отправляет данные.
  • onblur : ignore - Клик за пределами редактируемой области игнорируется. Нажатие на ESC отменяет изменения. Нажатие на кнопку отправки отсылает данные.

Событие, после которого начинается редактирование может быть определено в опции event. Все события из jQuery поддерживаются. Наиболее часто используемые - click и dblclick.

5 Комментарии

  • Салют )
    Не описана часть сохранения данных, куда — в базу данных или в файл?
    Для тех, кто не знаком с MySQL и PHP это ступор, как для меня :D

    Познакомьте пожалуйста с дальнейшими действиями — что делать, чтоб после перезагрузи страницы выводились сохранённые данные. Собственно — как сохранить?
    Спасибо

    • Не стояла цель дать готовое решение. Целью было перевести англоязычный мануал по этому плагину. Цель достигнута :)
      Для сохранения данных в базе они должны посылаться на сервер. А там нужно иметь обработчик этих данных, чтоб их записать в базу. Он может быть как на PHP+MySQL (как написали вы), так и на любом другом языке, который может выполнится на сервере (таких технологий множество — не вижу смысла их тут перечислять).
      Этот обработчик и его реализация целиком и полностью зависят от поставленной задачи. Так что готовое какое-то решение вам не могу предложить.
      Могу лишь предложить начать изучение PHP+MySQL+AJAX ;) Ну или как вариант найти друга, который это знает. Глубоких познаний в этом не надо.

  • Max

    Зачетный плагин, еще бы мануальчик как его использовать вместе с Masked Input, если не сложно, можно прям в комментах :)

    • Хм, интересный плагин. К сожалению, времени щас с ним разбираться нет, но идея интересная. Как руки дойдут — обязательно постараюсь написать.

  • Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Яндекс.Метрика