CKEditor plugin to set classes

Question

What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one

Answer 1

First of all you have to add your own buttons. Check source of any plugin that does this - e.g. basicstyles/plugin.js. You've got to create command for each button and then register all buttons. Simple.

Then I propose to use our styles implementation. It allows to apply/remove defined style from the given selection/range. In the style definition you can specify that it will apply span element with given classes. Check this style definition.

And the last step - join these things together. Command associated with button should apply/remove this style. There's ready to use one - check CKEDITOR.styleCommand usage here.

Everything you need is in basicstyles plugin, so just refer there.

Pozdrawiam :)

Answer 2

If you're flexible about the interface, you could just add your styles to the "Styles" selector.

It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.

---

You're welcome to use the plugin from the answer where you asked me to look at this question.

It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.

// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons

You would have multiple calls to the addButtonCommand method.

addButtonCommand( 'Fg_red'   , 'Label'   , 'fg_red'   , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue'   , 'Label'   , 'bg_blue'   , config.coreStyles_bg_blue );

The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:

CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };

---

You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.