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

    }

);
);

3 ответа 3

3

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

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

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

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

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

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

2

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

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

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. Если с английскким дружите, то можно задать вопрос прямо ним или на их форуме. Думаю, что эта аналогичная тема там поднималась.

1
  • Спасибо за попытку помочь, но это не то.
    – Nikoole
    4 апр 2012 в 13:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.