Question

I have a CKEditor custom plugin I’m trying to write, but need some help figuring out how to insert the value from a dropdown box for the “active” tab.

I have 4 tabs, each has its own dropdown list. When the user selects the tab, then chooses a value in the dropdown list, and then presses the “OK” button, I want the current value of the “Active tab’s” dropdown list to be inserted into the document.

The code below is working to do this, except I have to hard code the tab I want to get the information from. See: abbr.setText( dialog.getValueOf( 'tab1', 'tenant_dropdown' ) ); of the “onOk” event. I want something more like: abbr.setText( dialog.getValueOf( activeTab, activeElement ) ); or something like this…I couldn’t find the documentation for this…am I daft?

Any ideas how I can accomplish this? Thanks for your help.

Heres my plugin code:

CKEDITOR.plugins.add( 'rz_db',
{   
   requires : ['richcombo'], //, 'styles' ],
   init : function( editor )
   {
        editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        editor.ui.addButton( 'Rz Database Field',
                                    {
                                        label: 'Insert Rz Database Field',
                                        command: 'abbrDialog',
                                        icon: this.path + 'images/icon.png'
                                    } );
        CKEDITOR.dialog.add( 'abbrDialog', function ( editor )
        {
            var tenant_fields = []; //new Array();
            tenant_fields[0]=["First Name", "$RZ{tenant_first_name}"];
            tenant_fields[1]=["Last Name", "$RZ{tenant_first_name}"];
            tenant_fields[2]=["Address", "$RZ{tenant_address}"];

            return {
                title : 'Rz Database Fields',
                minWidth : 400,
                minHeight : 200,


                contents :
                [
                    {
                        id : 'tab1',
                        label : 'Tenants',
                        elements :
                        [
                            {
                                id : 'tenant_dropdown',
                                type : 'select',
                                label : 'Select the field you want, then press the "OK" button to insert it into the document.',
                                'default':'',
                                items: tenant_fields,
                                onChange : function( api ) {
                                  // this = CKEDITOR.ui.dialog.select
                                  alert( 'Current value: ' + this.getValue() );
                                }
                            }
                        ]
                    },
                    {
                        id : 'tab2',
                        label : 'Owners',
                        elements :
                        [
                            {
                                type : 'text',
                                id : 'id',
                                label : 'Id'
                            }
                        ]
                    },
                    {
                        id : 'tab3',
                        label : 'Vendors',
                        elements :
                        [
                            {
                                type : 'text',
                                id : 'id',
                                label : 'Id'
                            }
                        ]
                    },
                    {
                        id : 'tab4',
                        label : 'Other',
                        elements :
                        [
                            {
                                type : 'text',
                                id : 'id',
                                label : 'Id'
                            }
                        ]
                    }
                ],

                onOk : function()
                {
                    var dialog = this;
                    var abbr = editor.document.createElement( 'rz_db' );
                    abbr.setText( dialog.getValueOf( 'tab1', 'tenant_dropdown' ) );
                    editor.insertElement( abbr );
                }

            };
        } );
   }
});

Answer 1

never mind…I found a work around. If I set a global variable then assign the value during the “onchange” event and use the global variable in the “onOk” event it gets me what I needed.