I've been working on a solution to changing the toolbars when the editor is maximized and back again when it is minimized. I don't know if this is the best way to do it, but it seems to work okay. Basically the method involves injecting two toolbars, one 'Basic' and one 'Full'. Then using CSS to hide or show the appropriate toolbar.
I begin by creating a custom basic toolbar configuration:
Next I've modified the source for 'theme.js' changing:
to this:
Finally, I've simply added the following CSS rules.
Enjoy!
Michael
I begin by creating a custom basic toolbar configuration:
config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','Maximize'] ];
Next I've modified the source for 'theme.js' changing:
var topHtml = editor.fire( 'themeSpace', { space : 'top', html : '' } ).html;
to this:
var config = editor.config; config.toolbar = 'Full'; var topHtml = '<div class="cke_full">' + editor.fire( 'themeSpace', { space : 'top', html : '' } ).html + '</div>'; config.toolbar = 'Basic'; topHtml = topHtml + '<div class="cke_basic">' + editor.fire( 'themeSpace', { space : 'top', html : '' } ).html + '</div>';
Finally, I've simply added the following CSS rules.
.cke_full { display:none; } .cke_basic { display:block; } .cke_maximized .cke_full { display:block; } .cke_maximized .cke_basic { display:none; }
Enjoy!
Michael