Toolbars on both sides of the editor

I'm trying to customize the toolbar so that in addition to the basic set of functionality appearing on top, I can add some toolbar buttons on both side (right and left) of the editor. Currently it doesn't seem to be possible with just writing a customized config file.

What I've learned so far -

editor.on('themeSpace', function (event) {

if (event.data.space == editor.config.toolbarLocation) {

Am I going in the right direction? Will I need to edit any other files to accomplish this? Any suggestions would be greatly appreciated.

Thanks in advance!

-Sanny

Thu, 02/02/2012 - 04:49

sabbir_yousuf

Joined: 29/01/2012

Posts: 3

Re: Toolbars on both sides of the editor

I have figured it out. Thanks.

Thu, 02/02/2012 - 08:28

Anna

Joined: 14/12/2010

Posts: 1369

Re: Toolbars on both sides of the editor

If you did, why don't you post your solution for others to benefit as well? It's an interesting idea so it would be great if someone was able to reuse it!

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Mon, 02/13/2012 - 12:02

sabbir_yousuf

Joined: 29/01/2012

Posts: 3

Re: Toolbars on both sides of the editor

Anna wrote:If you did, why don't you post your solution for others to benefit as well? It's an interesting idea so it would be great if someone was able to reuse it!

Here's what I did (in short)-

1. Created a new theme based on default theme's source.
2. Created a new skin based on the skin 'kama'.
3. Edited the toolbar plugin
4. Added configuration settings like 'toolbars' and 'toolbarLocations' on config file.

Now some details -

1. The editor is placed in a table with 3 rows on the default theme. The theme space 'top' constitute the first row and contains the toolbar. The theme space 'contents' constitute the second row and contains the editing are and the third row (theme space 'bottom') is the 'Elements Path'.

2. Now I've modified the table so that it looks like this -

--------------------------------------------------------
|topLeft |              topCenter             |topRight|
--------------------------------------------------------
|left    |                  contents                   |
--------------------------------------------------------

'topLeft', 'topRight' etc. are the names of the newly created theme spaces.

3. I've added several lines like -

var topLeftHtml = editor.fire('themeSpace', { space: 'topLeft', html: '' }).html;
var topRightHtml = editor.fire('themeSpace', { space: 'topRight', html: '' }).html;

on the theme.js. And obviously, I modified the code that generated the table.

4. Now, on the toolbar plugin, I've modified this function -

editor.on('themeSpace', function (event) {

so that it can support multiple toolbar locations (that I can add from the config).

5. Finally I've worked on the skin to set the proper styling. I've mainly modified 'toolbar.css'.

Mon, 02/13/2012 - 16:00

Anna

Joined: 14/12/2010

Posts: 1369

Re: Toolbars on both sides of the editor

Great, thanks for this. I am sure your tips will be most valued by anyone who is willing to get a similar effect!

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!