Источник: http://habrahabr.ru/post/54529/

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

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

Начнем с datepicker’a.

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

$.editable.addInputType(‘datepicker’, {
    element : function(settings, original) {
        var input = $(‘<input />’).datepicker(settings.datepicker);  
        $(this).append(input);
        return(input);
    },   plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
         var form = this;
         $(‘input’,this)
        .trigger(‘change’)
         .bind(‘change’,function(){
             $(form).submit();
        .click();

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

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

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

$.editable.addInputType(‘wymeditor’, {
    element : function(settings, original) {
        var text = $(‘<textarea />’);
        var btn=$(‘<input type=»submit» id=»upd» value=»OK»/>’);
        if (settings.rows) {
            text.attr(‘rows’, settings.rows);
        } else {
            text.height(settings.height);
        if (settings.cols) {
            text.attr(‘cols’, settings.cols);
        } else {
            text.width(settings.width);
        $(this).append(text);
        $(this).append(btn);
        return(text);
    },   plugin : function(settings, original) {
         var form = this;
         $(‘textarea’,this).wymeditor(settings.wymeditor);

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

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

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

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

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

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