Ticket #7280 (review New Feature)

Opened 3 years ago

Last modified 2 weeks ago

Ability to switch toolbar at runtime

Reported by: alfonsoml Owned by: alfonsoml
Priority: Normal Milestone:
Component: UI : Toolbar Version:
Keywords: Cc: satya_minnekanti@…, paul@…

Description

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.

Attachments

7280.patch (1.1 KB) - added by alfonsoml 3 years ago.
core changes
7280_2.patch (13.8 KB) - added by alfonsoml 3 years ago.
good patch
7280_3.patch (14.9 KB) - added by alfonsoml 3 years ago.
Revised patch
errscrn.jpg (737.2 KB) - added by pauljvrw 3 years ago.
test_several_browsers.jpg (113.8 KB) - added by pauljvrw 3 years ago.
7280_4.patch (3.9 KB) - added by alfonsoml 3 years ago.
Updated patch to trunk
7280_maximize.patch (8.2 KB) - added by j.swiderski 20 months ago.

Change History

Changed 3 years ago by alfonsoml

core changes

comment:1 Changed 3 years ago by alfonsoml

  • Status changed from new to review

comment:2 Changed 3 years ago by satya

  • Cc satya_minnekanti@… added

comment:3 follow-up: ↓ 4 Changed 3 years ago by 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.

comment:4 in reply to: ↑ 3 Changed 3 years ago by pauljvrw

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.

comment:5 Changed 3 years ago by pauljvrw

  • Cc paul@… added

Changed 3 years ago by alfonsoml

good patch

comment:6 follow-ups: ↓ 7 ↓ 8 Changed 3 years ago by alfonsoml

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

comment:7 in reply to: ↑ 6 Changed 3 years ago by pauljvrw

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.

comment:8 in reply to: ↑ 6 ; follow-up: ↓ 9 Changed 3 years ago by 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( [[ '&permil;', '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.

comment:9 in reply to: ↑ 8 Changed 3 years ago by pauljvrw

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( [[ '&permil;', '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.

comment:10 Changed 3 years ago by alfonsoml

  • Status changed from review to assigned

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.

Changed 3 years ago by alfonsoml

Revised patch

comment:11 follow-ups: ↓ 12 ↓ 13 Changed 3 years ago by alfonsoml

  • Status changed from assigned to review

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( [[ '&permil;', 'Promille' ]] ); in my config file I get an error stating that CKEDITOR.config.specialChars is undefined.

Changed 3 years ago by pauljvrw

comment:12 in reply to: ↑ 11 Changed 3 years ago by pauljvrw

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( [[ '&permil;', '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( [[ '&permil;', '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

comment:13 in reply to: ↑ 11 Changed 3 years ago by pauljvrw

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( [[ '&permil;', '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.

comment:14 follow-up: ↓ 15 Changed 3 years ago by 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.

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.

Changed 3 years ago by pauljvrw

comment:15 in reply to: ↑ 14 Changed 3 years ago by pauljvrw

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.

Changed 3 years ago by alfonsoml

Updated patch to trunk

comment:16 Changed 2 years ago by pauljvrw

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.

comment:17 follow-up: ↓ 18 Changed 2 years ago by j.swiderski

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

comment:18 in reply to: ↑ 17 Changed 2 years ago by pauljvrw

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.

Last edited 2 years ago by pauljvrw (previous) (diff)

comment:19 Changed 2 years ago by j.swiderski

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.

comment:20 Changed 21 months ago by pauljvrw

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.

comment:21 Changed 21 months ago by j.swiderski

#939 was marked as duplicate.

comment:22 Changed 20 months ago by j.swiderski

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.

Changed 20 months ago by j.swiderski

comment:23 Changed 16 months ago by j.swiderski

#9792 was marked as duplicate.

comment:24 Changed 14 months ago by j.swiderski

#10088 was marked as duplicate.

comment:25 Changed 14 months ago by jscouvert

Hi,

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

Thanks

comment:26 Changed 14 months ago by j.swiderski

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

comment:27 Changed 14 months ago by jscouvert

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

Last edited 14 months ago by jscouvert (previous) (diff)

comment:28 Changed 11 months ago by pauljvrw

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.

comment:29 Changed 10 months ago by pauljvrw

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.

comment:30 Changed 10 months ago by pauljvrw

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.

comment:31 Changed 10 months ago by pauljvrw

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?

comment:32 Changed 2 weeks ago by j.swiderski

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.

comment:33 Changed 2 weeks ago by Reinmar

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

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy