CKEditor format class

Question

I am writing a CKEditor plugin to apply a specific class to an element. Basically this class is setting the text colour to a specific redish colour.

Anyways, I am not getting how to define a class for the wrapped text.

Please look at my plugin code:

CKEDITOR.plugins.add( 'red',
{
    init: function( editor )
    {
        editor.addCommand( 'red',
            {
                exec : function( editor )
                {    
                    var format = {
                        element : 'span'
                    };

                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            });
        editor.ui.addButton( 'red',
        {
            label: 'red',
            command: 'red',
            icon: this.path + 'images/red.png'
        } );
    }
} );

Basically I want to have an output like:

<span class="red">This is now a red text</span>

Thank you very much in advance for helping me.

The sources I have used to get this far: http://docs.cksource.com/CKEditor_3.x/Howto http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#exec

Maybe I overread something there, but for me it does not seem that this kind of things are mentioned there ? Please proof me wrong : )

Answer 1

You can use the the "basicstyles" plugin as a template, it creates the various style buttons (bold, italic, etc):
ckeditor/_source/plugins/basicstyles/plugin.js

Here's the code for your plugin (based on the basicstyles plugin), it would be the contents of the plugin.js file located here:
ckeditor/plugins/red/plugin.js

The icon for the button would be located here:
ckeditor/plugins/red/images

CKEDITOR.plugins.add( 'red',
{
  requires : [ 'styles', 'button' ],

  init : function( editor )
  {
    // This "addButtonCommand" function isn't needed, but
    // would be useful if you want to add multiple buttons
    var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton )
    {
      var style = new CKEDITOR.style( styleDefiniton );
      editor.attachStyleStateChange( style, function( state )
        {
          !editor.readOnly && editor.getCommand( commandName ).setState( state );
        });

      editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
      editor.ui.addButton( buttonName,
        {
          label : buttonLabel,
          command : commandName,
          icon: CKEDITOR.plugins.getPath('red') + 'images/red.png'
        });
    };

    var config = editor.config,
      lang = editor.lang;

    // This version uses the language functionality, as used in "basicstyles"
    // you'll need to add the label to each language definition file
    addButtonCommand( 'Red'   , lang.red    , 'red'   , config.coreStyles_red );

    // This version hard codes the label for the button by replacing `lang.red` with 'Red'
    addButtonCommand( 'Red'   , 'Red'   , 'red'   , config.coreStyles_red );
  }
});

// The basic configuration that you requested
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : {'class': 'red'} };

// You can assign multiple attributes too
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : { 'class': 'red', 'style' : 'background-color: yellow;', 'title' : 'Custom Format Entry' } };

Add the style for the "red" class to the ckeditor contents.css file in addition to your regular style sheet (unless you load the regular sheet as a custom css file in ckeditor).

Add the new plugin in your config file:

config.extraPlugins = 'red';

And add the button to your toolbar 'Red'

For the label, you could create an array with different labels assigned to each language code and pull the correct version based on the active language code. Use editor.langCode to get the active language code.

If you'd like to avoid adding a button, you could add a new entry to the "Format" Selector instead. It's the selector with the headings.

Be Well,
Joe