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 no

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