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

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.