Ticket #8378 (confirmed New Feature)

Opened 3 years ago

Last modified 3 years ago

Support for optgroup

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

Description

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

Change History

comment:1 Changed 3 years ago by j.swiderski

  • Status changed from new to closed
  • Resolution set to invalid

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 : editor.skin.editor.css.concat( 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 3 years ago by datalink

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

    CKEDITOR.on( 'dialogDefinition', function( ev )
    {
    	var dialogName = ev.data.name;
    	var dialogDefinition = ev.data.definition;
    	
    	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 3 years ago by j.swiderski

  • Status changed from closed to reopened
  • Resolution invalid deleted

That's much clearer now. Thank you.

comment:4 Changed 3 years ago by j.swiderski

  • Status changed from reopened to confirmed
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy