CKEditor plugin for setting classes

Question

What I want to do is something similar to the native foreground / background colors dialog box. The difference is that it will have buttons with colors directly on the toolbar. Thus, one plugin should have several buttons, with different styles (colors). Another problem is that this native plugin sets CSS color and background-color properties. I need to use classes, for example:

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

and

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

A click in the colors should change the span color with the fg class (and the background color - bg )

How can i achieve this?

Answer 1

First of all, you have to add your own buttons. Check the source of any plugin that does this - for example. basicstyles/plugin.js . You must create a command for each button, and then register all the buttons. Plain.

Then I suggest using a style implementation. This allows you to apply / remove a specific style from a given selection / range. In the style definition, you can specify that it will use the span element with the specified classes. Check out this style .

And the last step is to bring these things together. The command associated with the button should apply / remove this style. There is one thing ready to use - check out CKEDITOR.styleCommand usage here .

All you need is in the basicstyles plugin, so just go there.

Pozdrawiam :)

Answer 2

If you have the flexibility of an interface, you can simply add your styles to the Styles selector.

This will be less work than creating your own plugin. Especially if you are using CKEditor 3.6 or later, where you can use the new Parser Plugin for styles .

---

You can use the plugin from the answer where you asked me to consider this issue .

It is based on the plugin "basicstyles". If you look at the comments that I have included, you will 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 will have several 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 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 can also create a plugin based on the colorbutton plugin. It creates a dialog box of native front and rear colors.