Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Integrating CKEditor and JqGrid
05/08/2010
07:04
Avatar
tonier
Member
Members
Forum Posts: 3
Member Since:
30/09/2009
sp_UserOfflineSmall Offline

Last night (GMT+7) I have tried to load CKEditor as the WYSIWYG editor when I need to add or editing data with form editing features of JqGrid. Maybe someone out there can learn from what I have learnt that night, at least, you do not need to fell headache Embarassed as much as I do (I am newbie with less experiences with JqGrid Cool).

NB: I assume the field name that need to edit with CKEditor is 'keterangan'

/**
 * we want to use CKEDITOR, then we need to replace it field before form edit shown
 */
function ab_afterShowForm(ids)
{
    if( CKEDITOR.instances.keterangan )
    {
        try {
            CKEDITOR.instances.keterangan.destroy();
        } catch(e) {
            CKEDITOR.remove( 'keterangan' );
        }
        //CKEDITOR.instances.keterangan = null;
    }
    CKEDITOR.replace( 'keterangan',
    {
        height: 80,
        toolbar:
        [
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript']
        ],
        removePlugins : 'maximize,resize,scayt'
    });
    // JQGrid
    // we need to get selected row in case currently we are in Edit Mode
    selID = $('#catdnd').getGridParam('selrow'); // get selected row
    // I don't know how to get the current mode is, in Editing or Add new?
    // then let's find out if
    //navigational buttons are hidden for both of it and selID == null <– Add mode ^0^
    if( !($('a#pData').is(':hidden') || $('a#nData').is(':hidden') && selID==null))
    { // then it must be edit?
        va = $('#catdnd').getRowData(selID);
        CKEDITOR.instances.keterangan.setData( va['keterangan'] );
    }
};

/**
 * CKEDITOR didn't automaticaly replace our 'keterangan' value then it need to set manually
 */
function ab_beforeSubmit(data)
{
    data['keterangan'] = CKEDITOR.instances.keterangan.getData();
    return [true];
};
/**
 * What if currently in edit mode and user click navigational button?
 */
function ab_afterclickPgButtons(whichbutton, formid, rowid)
{
    //$('#catdnd').getRowData(rowid);
    va = $('#catdnd').getRowData(rowid);
    CKEDITOR.instances.keterangan.setData( va['keterangan'] );
    //return [true];
}

Then like commonly rules, attach that function into our JqGrid …

[ snif ... snif ... ]
$(jqg_ID).jqGrid({
    [ snif ... snif ... ]
        colModel:
        [
            [ snif ... snif ... ],
            {name:'keterangan',
            editable:true,
            edittype:"textarea",
            editoptions:{size:80,rows:"2",cols:"10"},
            editrules:{edithidden:true}}
,
            [ snif ... snif ... ]
        ],
    [ snif .. snif ... ]
}).navGrid('#pagerdnd',
    {edit:true,add:true,del:true},
    {height:350, width:731,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_edit,
        afterclickPgButtons: ab_afterclickPgButtons,
        beforeSubmit: ab_beforeSubmit,
        afterShowForm: ab_afterShowForm
    }, // update data
    {height:350, width:731,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_add,
        beforeSubmit: ab_beforeSubmit,
        afterShowForm: ab_afterShowForm
    }, // insert data
    {height:120, width:300,reloadAfterSubmit:false,
        afterSubmit: your_after_submit_delete
    } // delete data
);
[ snif ... snif ... ]

That's it Cool

(My apologies for bad English)

17/08/2010
23:15
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Thank you very much for this code. I hope it will be a usefull for a lot of people.

Kind Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

28/02/2013
19:40
Avatar
apostolix
New Member
Members
Forum Posts: 1
Member Since:
28/02/2013
sp_UserOfflineSmall Offline

Can someone please provide a full example of this code because I am a little confused about how to integrate this code in my grid script!

Thank you

27/09/2013
05:39
Avatar
wang19851121
New Member
Members
Forum Posts: 1
Member Since:
27/09/2013
sp_UserOfflineSmall Offline

Hello,

Thank you very much for this code.

Show error msg  "The editor instance "xxx" is already attached to the provided element." , when i used ckeditor in ckeditor v4.2 .

But  i used this code in ckeditor v3.5.3 , it's OK.

Armstrong

Forum Timezone: Europe/Sofia

Most Users Ever Online: 496

Currently Online:
32 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information