Расширение Jeditable плагина на примере Wymeditor и JqueryUI.datepicker

Столкнулся с задачей когда надо было сделать на сайте возможность редактировать контент в паблик части по клику на блок. И решил что это неплохой повод освоить jQuery. Скачал jquery, jQuery UI (плагин datepicker), wymeditor и Jeditable плагин.

С интеграцией jeditable все было просто. Плагин очень порадовал, оказался гораздо удобней плагина Editable. А вот с интеграцией с jQueryUI.datepicker и wymeditor’ом пришлось немного повозиться.
Проблема с которой я столкнулся заключалась в том что по поводу расширения плагина jeditable было написано очень мало, точнее только страница с примерами, я до этого с jQuery дел не имел и поэтому пришлось помучаться. Результаты с объяснением ниже, авось кому поможет.
p.s. оказалось что документация есть но я ее плохо искал.


Начнем с datepicker'a.

Вот результат:

1. $.editable.addInputType('datepicker', {
   
2.     element : function(settings, original) {
   
3.         var input = $('<input />').datepicker(settings.datepicker);  
   
4.         $(this).append(input);
   
5.         return(input);
   
6.     },   plugin : function(settings, original) {
   
7.         /* Workaround for missing parentNode in IE */
   
8.          var form = this;
   
9.          $('input',this)
   
10.         .trigger('change')
    
11.          .bind('change',function(){
    
12.              $(form).submit();
    
13.              })
    
14.         .click();
    
15.     }
    
16. });

Для начала мы добавляем новый Input type к объекту Jeditable. Есть два параметра(может и еще есть, но я не столкнулся, если кто просветит буду рад) element и plugin. Element создает элемент которым будет замещаться редактируемый текст, в нашем случае это input. Код в plugin выполняется сразу после создания нового элемента. Так как datepicker плагин появляется по клику, то событие click пришлось вызвать самостоятельно. предварительно вызвав событие change для jeditable плагина. В результате наш текст заменился сначала на input, а затем показалось всплывающее окно выбора даты. Но нам нужно было как то отловить событие завершения редактирования. Так как под рукой не было инета пришлось разбираться в minified версии jQueryUI. Но в итоге понял что надо вешать сабмит на событие change.

Теперь перейдем к Wymeditor’у

Сначала результат:

1. $.editable.addInputType('wymeditor', {
   
2.     element : function(settings, original) {
   
3.         var text = $('<textarea />');
   
4.         var btn=$('<input type="submit" id="upd" class="wymupdate" value="OK"/>');
   
5.         if (settings.rows) {
   
6.             text.attr('rows', settings.rows);
   
7.         } else {
   
8.             text.height(settings.height);
   
9.         }
   
10.         if (settings.cols) {
    
11.             text.attr('cols', settings.cols);
    
12.         } else {
    
13.             text.width(settings.width);
    
14.         }
    
15.         $(this).append(text);
    
16.         $(this).append(btn);
    
17.         return(text);
    
18.     },   plugin : function(settings, original) {
    
19.    
    
20.          var form = this;
    
21.          $('textarea',this).wymeditor(settings.wymeditor);
    
22. 
    
23.     }
    
24. });

Здесь проблема была в том что в самом Wymeditor'e нет кнопки submit и пришлось добавить свою.Я не до конца понял как оно работает, в ходе экспериментов подобрал вариант когда отдельно создавал textarea и кнопку.

Подключается затем это все просто 

1. $('div.textarea').editable('http://pim/save_elem.php',{type:'wymeditor'});
   
2. 
   
3.   $('div.date').editable('http://pim/save_elem.php',
   
4.         {
   
5.            type:'datepicker',
   
6.            datepicker:{dateFormat: 'yy-mm-dd',changeYear: true}
   
7.         });

где 'http://pim/save_elem.php' это адрес обработчика.

P.S. почему то я не заметил на сайте автора. Так что все описаное выше это по сути лишние мученя ибо туториал был тут тут

P.P.S. залил страничку с тестами tkf.110mb.com с jWYSIWYG получилось как и расчитывал.