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

score 5 · Accepted Answer · answered Oct 07 '11 at 09:17

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

@codewaggle What if my plugin has more than one button and has to change more than one color? Like here: http://stackoverflow.com/questions/12787891/ckeditor-plugin-to-set-classes — ciembor, Oct 11 '12 at 17:40
@codewaggle Was wondering, is there a way to change from `styleDefinition` to a custom function e.g. `something()`? Hard find tutorials of any kind for ckeditor4 — RaphaelDDL, Jun 20 '13 at 15:07
@codewaggle Well, I want to create a button which instead of adding a HTML to the editor, it needs to call a function made somewhere on the page (which will call a modal to list some stuff). So it's just like AddButtonCommand but instead of declaring something like `CKEDITOR.config.*`, needs to call an external function. — RaphaelDDL, Jun 20 '13 at 20:44
@RaphaelDDL Near the end of the plugin code block in this answer is a commented out section that says "Open dialog window", just search the page to find it. It's been a while, but I think I put the function in the config file so that it would be in the iframe and same namespace. You may be able to place the function in the main page and call it from the parent window. http://stackoverflow.com/questions/11328681/how-to-block-editing-on-certain-part-of-content-in-ckeditor-textarea/11370552#11370552 — codewaggle, Jun 20 '13 at 21:47
@codewaggle Thanks man. I've read that code and thanks to this and the other you linked, I found a way of adding what I wanted. It was actually more simple but that part of plugin folder explanation saved me =) I made a fiddle to share the info with you: http://jsfiddle.net/RaphaelDDL/s8K3h/ Thank you very much for your time — RaphaelDDL, Jun 21 '13 at 14:14
@RaphaelDDL The jsfiddle code looks great (good comment usage!). I don't think I tried using the parent window approach, so it's good to know that it works. Glad I was able to help. I'm deleting some of my previous comments as they are no longer needed. — codewaggle, Jun 21 '13 at 16:06

CKEditor format class

1 Answers1

Linked