CODEWITHSUNDEEP
javascriptpluginscolorsckeditorwysiwyg
ciembor
ciembor

Reputation: 7335

CKEditor plugin to set classes

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?

Upvotes: 4

Views: 2854

Answers (2)

codewaggle
codewaggle

Reputation: 4943

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.

Upvotes: 2

Reinmar
Reinmar

Reputation: 22023

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 :)

Upvotes: 2

Related Questions