Ability to switch toolbar at runtime

[Alfonso Martínez de Lizarrondo]

These is a feature that people have requested several times, these are two related tickets (although they don't request the same thing) #6374 and #7038

This is a request to provide a editor.setToolbar() method that can change the current toolbar to a new one on the fly, it's almost possible with this code:

// Set new Toolbar
CKEDITOR.editor.prototype.setToolbar = function( toolbar )
{
	// Destroy previous toolbar
	var toolbars, index = 0, i,
			items, instance;
	toolbars = this.toolbox.toolbars;
	for ( ; index < toolbars.length; index++ )
	{
		items = toolbars[ index ].items;
		for ( i = 0; i < items.length; i++ )
		{
			instance = items[ i ];
			if ( instance.clickFn ) CKEDITOR.tools.removeFunction( instance.clickFn );
			if ( instance.keyDownFn ) CKEDITOR.tools.removeFunction( instance.keyDownFn );

			if ( instance.index ) CKEDITOR.ui.button._.instances[ instance.index ] = null;
		}
	}

	// Set new one
	this.config.toolbar = toolbar;

	// create it
	var toolbarLocation = this.config.toolbarLocation,
		space = document.getElementById('cke_' + toolbarLocation + '_' + this.name),
		html = this.fire( 'themeSpace', { space : toolbarLocation, html : '' } ).html;

	space.innerHTML = html;
}

But there are two issues that have to be patched in order to work this way.

The patch addresses just those issues, but a more robust and compact setToolbar method could be created.

[Alfonso Martínez de Lizarrondo]

core changes

[Alfonso Martínez de Lizarrondo]

This second patch is a reorganization of the code in the toolbar plugin to provide the editor.setToolbar method in an easy way reusing the existing code. It's basically a reorganization of the code to reuse the create HTML and destroy toolbar code.

[Paul Veldema]

Replying to alfonsoml:

This second patch is a reorganization of the code in the toolbar plugin to provide the editor.setToolbar method in an easy way reusing the existing code. It's basically a reorganization of the code to reuse the create HTML and destroy toolbar code.

patch 2 is patch 1 when I try to view or download it.

[Alfonso Martínez de Lizarrondo]

good patch

[Alfonso Martínez de Lizarrondo]

Thanks for the warning. I've removed that duplicated version and uploaded the correct one.

[Paul Veldema]

Replying to alfonsoml:

Thanks for the warning. I've removed that duplicated version and uploaded the correct one.

I tested this with in combination with fullscreen mode and got the following error:

TypeError: buttonNode is null ​http://<mytestmachine>/pub/ckeditor-3.5.3-toolbarpatch/_source/plugins/maximize/plugin.js Line 299

To reproduce:

var editor = CKEDITOR.instances.<FIELDID>;
editor.setToolbar( "Full" );
editor.execCommand("maximize");

The combination of your patches in combination with the code block I added to #7038 for auto toolbar switching works by the way. So thanks, almost there.

[Paul Veldema]

Replying to alfonsoml:

Thanks for the warning. I've removed that duplicated version and uploaded the correct one.

Found another bug after the patches were applied:

Fout: CKEDITOR.config.specialChars is undefined Sourcefile: ​http://<mytestmachine>/pub/ckeditor-custom/realworks_cke.js?Fri%20Apr%2001%202011%2016:06:17%20GMT+02001 Line: 54

How to reproduce: add the following to your own config js:

CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] );

You can also see in the editor as a result the setting:

CKEDITOR.config.removePlugins = 'elementspath';

no longer works after these patches when you concat special chars.

[Paul Veldema]

Forgot to translate Fout to Error :)

Replying to pauljvrw:

Replying to alfonsoml:

Thanks for the warning. I've removed that duplicated version and uploaded the correct one.

Found another bug after the patches were applied:

Fout: CKEDITOR.config.specialChars is undefined Sourcefile: ​http://<mytestmachine>/pub/ckeditor-custom/realworks_cke.js?Fri%20Apr%2001%202011%2016:06:17%20GMT+02001 Line: 54

How to reproduce: add the following to your own config js:

CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] );

You can also see in the editor as a result the setting:

CKEDITOR.config.removePlugins = 'elementspath';

no longer works after these patches when you concat special chars.

[Alfonso Martínez de Lizarrondo]

I've fixed the maximize problem, but now I see problems when switching to source view. I'll provide a new patch when everything is working.

[Alfonso Martínez de Lizarrondo]

Revised patch

[Alfonso Martínez de Lizarrondo]

This new patch fixes the problems that I've found, but I haven't noticed any problem about the elementsPath plugin. If I try to use CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] ); in my config file I get an error stating that CKEDITOR.config.specialChars is undefined.

[Paul Veldema]

Replying to alfonsoml:

This new patch fixes the problems that I've found, but I haven't noticed any problem about the elementsPath plugin. If I try to use CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] ); in my config file I get an error stating that CKEDITOR.config.specialChars is undefined.

I retested after patch 3 and still get the elements patch bug after the patch. I added a screenshot. Here is a cleaned up version of our config (no external plugins etc):

CKEDITOR.config.toolbar_rw_small = [
	['Bold','Italic','Underline'],
	['NumberedList','BulletedList'],
	['TextColor'],
	['FontSize'],
	['Maximize']
];

CKEDITOR.config.toolbar_email = [
	['Cut','Copy','Paste','PasteText','PasteFromWord'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	['Link','Unlink'],
	['Image','Table','HorizontalRule','SpecialChar','Smiley'],
	['TextColor','BGColor','Source', 'SpellChecker', 'Scayt'],
	['Font','FontSize'],['Styles','Format','-','Maximize']
];

CKEDITOR.config.startupFocus = false;
CKEDITOR.config.skin = 'office2003';

CKEDITOR.config.defaultLanguage    = 'nl';

CKEDITOR.config.toolbarCanCollapse = true;
CKEDITOR.config.toolbarStartExpanded = true;
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] );

CKEDITOR.config.resize_dir = 'both';
CKEDITOR.config.resize_enabled = false;

CKEDITOR.config.EMailProtection = 'none';
CKEDITOR.config.removePlugins = 'elementspath';

Furthermore the concat on specialChars should work (and does before the patch). This because it is in the documentation of how to add custom special chars: ​http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.specialChars

[Paul Veldema]

Replying to alfonsoml:

This new patch fixes the problems that I've found, but I haven't noticed any problem about the elementsPath plugin. If I try to use CKEDITOR.config.specialChars = CKEDITOR.config.specialChars.concat( [[ '‰', 'Promille' ]] ); in my config file I get an error stating that CKEDITOR.config.specialChars is undefined.

I forgot to mention that if I remove the concat line from our config (see the previous reply) the

CKEDITOR.config.removePlugins = 'elementspath';

does work.

[Alfonso Martínez de Lizarrondo]

Sorry, but I'm unable to reproduce your problems.

the concat only works when you work with the released code, if you try to use the _source version then the CKEDITOR.config object is populated after the config file has been processed, so it will fail.

In that case the error makes the whole editor fail and doesn't load.

I've been testing with the replaceByClass sample, and looked briefly at other samples and they behaved properly.

I don't know what browser you are using, it's clearly not IE due to the rounded borders, but I haven't found any that had the rendering problems with the collapse button and the height of the buttons in the dropdown elements.

[Paul Veldema]

Replying to alfonsoml:

Sorry, but I'm unable to reproduce your problems.

the concat only works when you work with the released code, if you try to use the _source version then the CKEDITOR.config object is populated after the config file has been processed, so it will fail.

In that case the error makes the whole editor fail and doesn't load.

I've been testing with the replaceByClass sample, and looked briefly at other samples and they behaved properly.

We do what the replacebycode sample does. But then with a custom config included in the head section of the html. And a function to do the replace with our config:

	CKEDITOR.replace(oArray.id, {
		customConfig : '/pub/ckeditor-custom.js?' + (new Date() + 1),
		toolbar : oArray.toolbar,
		startupFocus : oArray.focus
	});

That may explain why with us the editor does load with the _source version.

By the way, is there a good reason that the _source and released code do things differently? I would think that only makes testing en developing harder.

I don't know what browser you are using, it's clearly not IE due to the rounded borders,

That is related to css we have. I added a screen shot that shows IE7, FF and Chrome to show any problem is not browser related.

but I haven't found any that had the rendering problems with the collapse button and the height of the buttons in the dropdown elements.

There is a separate ticket this. But again it is css related.

[Alfonso Martínez de Lizarrondo]

Updated patch to trunk

[Paul Veldema]

Can someone review this latest 7280_4.patch patch so it can be added to the releases?

It works great for us in our production environment. We have been using these patches for months now and we have used this latest patch in our production environment from when it was added to this ticket.

We use it in a custom toolbar switch plugin like requested in ticket 7038.

[Jakub Ś]

I have managed to run it only in relase version, not in source.

[Paul Veldema]

Replying to j.swiderski:

I have managed to run it only in relase version, not in source.

Is that because you have a concat line like mentioned in comment 12?

See comment 14 for the solution: remove the concat line.

[Jakub Ś]

Sorry for my last comment.

I was not able to run it on trunk (got empty toolbar) but it is working great in release code with both ckeditor.js and ckeditor_source.js.

[Paul Veldema]

The patch is no longer up to date. The toolbar plugin has changed from 3.6.3 to 3.6.4. A line with:

requires : [ 'button' ],

was added. Adjusting the patch for that everything runs fine for me.

[Jakub Ś]

#939 was marked as duplicate.

[Jakub Ś]

One of the users has asked me about possibility to change toolbar when you press maximize button.

As a result I'm attaching the maximize patch that should be used on trunk version of CKEditor. Then new release should be built of course.

The patch contains 7280_4.patch, toolbars and method entered in config.js, simple events added in replacebycode.html sample and maximize plugin which fires beforeMaximize event. The last is very important as you must change CKEditor toolbar before maximize will start calculating how much space it can take for which element.

[Jakub Ś]

#9792 was marked as duplicate.

[Jakub Ś]

#10088 was marked as duplicate.

[Couvert]

Hi,

I would like to know if this method work on ckeditor 4.X.X ?

Thanks

[Jakub Ś]

You can try using it in v4, however fix was prepared for v3 thus it may not work.

[Couvert]

Ok. I'll try to make it work. Thank you

[Paul Veldema]

I just tried 7280_maximize.patch on ckeditor 4.1.1. Based on the patch modifications were easily applied by hand.

It does not work though. The following piece of the patch gives an error:

space = document.getElementById( 'cke_' + toolbarLocation + '_' + this.name );
space.innerHTML = generateToolbarHtml( this );

The 'document.getElementById' returns null and causes an 'TypeError: space is null' error on the next line. The element name in ckeditor 4 must be slightly different.

It would be nice to have an updated patch for ckeditor 4.

[Paul Veldema]

I created a plugin for this to see if it could be done without changes in the ckeditor base code: ​https://github.com/paulveldema/ckeditor-plugins/blob/master/toolbarswitch/plugin.js this is inspired on ​http://stackoverflow.com/questions/12531002/change-ckeditor-toolbar-dynamically

It is still buggy though. For example some buttons no longer work after switching tool bars. Most work though.

Can anyone give me some tips on which java script to look at to make the remaining buttons work after switching? Any changes in the plugins that do not work to make them toolbar switch friendly would be appreciated.

Tested on ckeditor 4.1.1 and 4.1.2.

[Paul Veldema]

I added the toolbar switch plugin to the addons: ​http://ckeditor.com/addon/toolbarswitch

From attachment 7280_maximize.patch​ the change in plugins/panelbutton/plugin.js is needed to keep the text color button working after switching the toolbar. It would be nice if someone could commit that change to master. As far I could test it has no adverse effects.

What exactly does not yet work with the plugin is listed on the addon page. If there is a single small patch (cksource or the plugin) that can get the remaining group of buttons working I am very interested.

[Paul Veldema]

Question on a needed fix for the toolbarswitch plugin (version 4.1 of ckeditor):

With the toolbarswitch plugin enabled and maximizing the editor to switch the toolbar afterwards the maximize button label is not changed to 'minimize'. The cause is a 'null' error on the second line in the following code piece of the maximize plugin:

var buttonNode = CKEDITOR.document.getById( button._.id );
buttonNode.getChild( 1 ).setHtml( label );
buttonNode.setAttribute( 'title', label );
buttonNode.setAttribute( 'href', 'javascript:void("' + label + '");' );

I could change it to:

var buttonNode = CKEDITOR.document.getById( button._.id );
if (buttonNode) {
    buttonNode.getChild( 1 ).setHtml( label );
    buttonNode.setAttribute( 'title', label );
    buttonNode.setAttribute( 'href', 'javascript:void("' + label + '");' );
}

However then the label would no longer change to 'minimize' when the editor is maximized. Does anyone have an alternative solution?

[Jakub Ś]

In CKEditor 4 we have introduced ACF thus this issue seems much more complicated now.

There might be two solutions.
Solution 1:

• We could inroduce methods like hideButton(buttonName, shouldRevmoeACFRules); and disableButton(buttonName, shouldRevmoeACFRules);. With such simple method users could disable/enable, hide/show buttons based on whatever actions they desire.
• Additionally we could introduce (hide|disable)ToolbarGroup(toolbarGroupName, shouldRevmoeACFRules);
• Parameter remove corresponding ACF rules is something to rethink. I believe that in most cases users will not want to change ACF rules they have and will just enjoy UI changes but there might be small percent of users who will want this so perhaps we could think of such option or simply say you need to destroy/create editor in that case.
  This is much work for us and less work for CKEditor users/devs.

Solution 2:

• I was suggested on support channel. We could provide marker CSS classes that can be used to search DOM elements and change button visibility.
  This is less work for us and much more work for CKEditor users/devs.

[Piotrek Koszuliński]

Well... one thing is sure - we need this on API level not CSS level. For example, it must be integrated with keyboard support.

[Jakub Ś]

#12278 was marked as duplicate.