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 plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:

text <span class="fg red">colored text</span> text

and

text <span class="bg blue">colored background</span> text

Clicking into colors have to change color of a span with fg class (and background colors - bg class)

How can I achieve this?

Answer 1

First of all you have to add your own buttons. Check source of any plugin that does this - eg 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.