One of the fields in the editable table row must be able to be edited in the tinymce editor. How to make friends jqgrid and tinymce - I can not figure it out. Can anyone come across, aah ..?

Update: Here is my answer to my question. (stuck, as you said, in the modal window) Sorry for this formatting, I can not figure out how to arrange everything beautifully :(: jQuery ('# table'). jqGrid ({

// jqgrid settings

}). navGrid ('# tablePager',

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

{

// edit parameters

width: "100%",

height: 550,

reloadAfterSubmit: true

after ShowForm: function () {

// before displaying the edit window, substitute the desired content field with an editor

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

before ShowForm: 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 answers 3

    First you need to decide where you are going to edit this field. For jqgrid there are several options.

    1. inline when editing is in line.
    2. in the jqgrid dialog itself (editGridRow method. see examples of live data manipulation )
    3. or independently, in the elements changing the data programmatically

    In short, you need to understand what element you will have TinyMCE.

    For the first option, a method that is implemented with datepicker integration is suitable. (see examples Integration-> Datepicker. That is, a separate div is created, which is shown when inline-editing).

    In the second case, you just need to apply the tinymce function to the corresponding textarea element (see TinyMCE jQuery plugin ).

    In the third case - it is clear - add tinymce functionality for your element ...

      Good question. For example, you can place tinymce in a hidden div'е , by clicking on the desired cell (button in the cell), transfer the required field to tinymce and display it. After the operations on the text, the Ajax update the data, hide the field and update the jqgrid table (as I recall there is a special method for this).

      UPDATE. To display tinymce you can shove it into a modal window. For example, in jQueryUI Dialog . So it will be more beautiful :)

        Maybe I did not understand, but just in case. For dynamic loading in the field and saving they have two functions. Code from their examples:

         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); }

        PS If you are friends with English, you can ask a question directly to him or on their forum. I think that this similar topic was raised there.

        • Thanks for trying to help, but this is not the case. - Nikoole