Opened 12 years ago

Last modified 9 years ago

#8378 confirmed New Feature

Support for optgroup

Reported by: datalink Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:


For a better overview I want to have the optgroup element for select in one of my plugins.

Attachments (1)

plugin.js (6.3 KB) - added by datalink 9 years ago.
uioptselect plugin

Download all attachments as: .zip

Change History (6)

comment:1 Changed 12 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

Rich Combos that are used with CKEditor already have their "optgroup".

Please check stylescombo of font plugin.

As you probably know such types of plugins can be added with code:

CKEDITOR.plugins.add( 'mycombo',
//For this plugin we need to be sure that the code from the "richcombo" plugin is loaded, 
//as that's the real code that creates the dropdown element
requires : [ 'richcombo' ],
    init : function( editor )
		var config = editor.config;
		var combo = '';		
		editor.ui.addRichCombo( 'mycombo',
			label : "MY Combo",
			title :"My Combo",
//Marker class that allows for float panel custom styling. Just create new CSS file with class
//.cke_skin_kama cke_myclass_panel and put styles you want inside it.
// NOTE: You can also use .cke_skin_v2 or .cke_skin_office2003
			className : 'cke_myclass',
			//Attributes for the dropdown float panel
			panel :
                css : config.contentsCss ),
				multiSelect : false
			//Initializes the dropdown on first click
			init : function()
				combo = this;
				combo.startGroup( 'MY COMBO GROUP' );
				This is what you are interested in.
				startGroup() method adds something like "optgroup" you were looking for
				It can be used with for loop and localization string or 
				or very simple just like presented above
			//Specifies action to be executed when user clicks on one of elements in the dropdown
			onClick : function( value )
			//Action executed when combo is rendered (when first shown or when selection was made)
			//It is best to use it with editor.on( 'selectionChange') which will be invoked whenever 
			//selection changes
			onRender : finction(){
				editor.on( 'selectionChange', function( ev ){ },this);
			reset: function(){ }
			//Action executed when combo is being opened
			onOpen : function(){ }
} );

Hope that this will clear things up a bit.

If I didn't understand you correctly please write me back.

comment:2 Changed 12 years ago by datalink

Sorry for the request without explains. What I mean are selectboxes in dialog.

    CKEDITOR.on( 'dialogDefinition', function( ev )
    	var dialogName =;
    	var dialogDefinition =;
    	if ( dialogName == 'mydialog' )
            var infoTab = dialogDefinition.getContents('info');
            infoTab.add( {
    			type : 'select',
    			id : 'myselect',
    			label : 'My Select',
    			'default' : '',
    			items : [ [name, value], [name, value], [name, value] ],

What I want is to group the items like this

items : [
            [ groupname1,
                [name, value], [name, value], [name, value]
            [ groupname2,
                [name, value], [name, value], [name, value]

comment:3 Changed 12 years ago by Jakub Ś

Resolution: invalid
Status: closedreopened

That's much clearer now. Thank you.

comment:4 Changed 12 years ago by Jakub Ś

Status: reopenedconfirmed

Changed 9 years ago by datalink

Attachment: plugin.js added

uioptselect plugin

comment:5 Changed 9 years ago by datalink

I copy the select part from the dialog ui source and create this plugin with it.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy