jquery - jqgrid + tinymce


2

Одно из полей редактируемой строки таблицы надо иметь возможность редактировать в редакторе tinymce. Как подружить jqgrid и tinymce - не могу разобраться. Может кто сталкивался, ааа..?

Update: Вот мой ответ на мой вопрос. (засунул, как вы сказали, в модальное окно) Извините за такое форматирование, не могу разобраться как красиво все оформить :( : jQuery(#table).jqGrid({

// настройки jqgrid

}).navGrid(#tablePager,

    {refresh:true,add:true,edit:true,del:true,search:true},

{

// edit parameters

width: "100%",

height: 550,

reloadAfterSubmit:true,

afterShowForm: function() {

// перед показом окошка с редактированием, подменяем нужное поле content на редактор

tinyMCE.init({

 mode: "exact",

 theme : "advanced",

 language: "ru",

 elements: "content",

 // еще какие-то настройки

});

},

onclickSubmit: function() {

var contenttext = tinyMCE.get(content).getContent();

return {

 content: contenttext

};

},

onClose: function() {

tinyMCE.get(content).remove();

return true;

},

},

{

// add parameters

width: "100%",

height: 550,

reloadAfterSubmit:true,

beforeShowForm: function() {

tinyMCE.init({

 mode: "exact",

 theme : "advanced",

 language: "ru",

 elements: "content",

 height: 400,

 // еще какие-то настройки

});

},

onclickSubmit: function() {

var contenttext = tinyMCE.get(content).getContent();

return {

content: contenttext

};

},

onClose: function() {

tinyMCE.get(content).remove();

},

    },

    {

        //delete parameters

    }

);
);
Источник
  •  599
  •  3
  • 5 янв 2012 2012-01-05 06:35:34

3 ответа

3

Для начала надо решить, где вы собираетесь редактировать это поле. Для jqgrid есть несколько вариантов.

  1. inline, когда редактирование идет в строке.
  2. в диалоге самого jqgridа (метод editGridRow. см примеры Live data manipulation)
  3. или самостоятельно, в своих элементах изменяя данные программно

Короче говоря, надо понять, какой элемент у вас будет TinyMCE.

Для первого варианта подойдет метод, который реализован с интеграцией datepickerа. (см. в примерах Integration->Datepicker. Т.е. создается отдельный div, который показывается при inline-редактировании).

Во втором случае просто надо применить к соответствующему элементу textarea функцию tinymce (см TinyMCE jQuery plugin).

В третьем случае - понятно, - для своего элемента добавить функционал tinymce...

  • 4 янв 2012 2012-01-04 23:11:44
2

Может я не так понял, но на всяк случай. Для динамической подгрузки в поле и сохранения у них предусмотрены две функции. Код из их примеров:

function ajaxLoad() {
        var ed = tinyMCE.get(content);

        // Do you ajax call here, window.setTimeout fakes ajax call
        ed.setProgressState(1); // Show progress
        window.setTimeout(function() {
                ed.setProgressState(0); // Hide progress
                ed.setContent(HTML content that got passed from server.);
        }, 3000);
}

function ajaxSave() {
        var ed = tinyMCE.get(content);

        // Do you ajax call here, window.setTimeout fakes ajax call
        ed.setProgressState(1); // Show progress
        window.setTimeout(function() {
                ed.setProgressState(0); // Hide progress
                alert(ed.getContent());
        }, 3000);
}

P.S. Если с английскким дружите, то можно задать вопрос прямо ним или на их форуме. Думаю, что эта аналогичная тема там поднималась.

  • 4 янв 2012 2012-01-04 11:55:06
Спасибо за попытку помочь, но это не то. — 4 янв 20122012-01-04 12:23:25.000000
2

Хороший вопрос. Например, можно разместить tinymce в скрытом divе, по нажатию на нужную ячейку (кнопку в ячейке) передавать необходимое поле в tinymce и отображать его. После операций над текстом аяксом апдейтить данные, скрывать поле и обновлять таблицу jqgrid (насколько я помню там есть специальный метод для этого).

UPDATE. Для отображения tinymce можно засунуть в модальное окно. Например, в JQueryUI Dialog. Так будет красивее :)