Add Custom Style To Style Dropdown Menu

Add Custom Styles

There are several way to add custom styles to the styles dropdown menu.

Method #1 - Use the default styles.js

We can edit the default styles.js file located in the root of ckeditor.

For more details on the syntax for the styles check out the ckeditor documentation.

You can add or remove styles from the styles.js file.

CKEDITOR.stylesSet.add( 'default', [

        { name: 'Italic Title',         element: 'h2', styles: { 'font-style': 'italic' } },
        { name: 'Subtitle',                     element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } 
...

Method #2 - Implement Syles

Add the implementation directly to one the ckeditor configuration file. Ex. The default configuration file config.js in the root of ckeditor.

For more details on the syntax for the styles check out the ckeditor documentation.

//create a new style named my_styles.
CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles.
    { name: 'Blue Title', element: 'h2', styles: { color: 'Blue' } },
    { name: 'Red Title',  element: 'h3', styles: { color: 'Red' } },

    // Inline styles.
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);

//in the configuration section load the style
CKEDITOR.editorConfig = function( config ) {

  //the name of the styles to load.
  //NOTE: all the default styles will be overridden.
  config.stylesSet = 'my_styles';
};

Method #2 - Load Style Definition From External File

Create a javascript file and call it whatever you like. Ex. my_styles.js 

Add your style definition to the file.

For more details on the syntax for the styles check out the ckeditor documentation.

//create a new style named my_styles.
CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles.
    { name: 'Blue Title', element: 'h2', styles: { color: 'Blue' } },
    { name: 'Red Title',  element: 'h3', styles: { color: 'Red' } },

    // Inline styles.
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);

 

Now we need to load the external style by specifying it in the ckeditor configuration. One place to do so is in the root config.js file located in the ckeditor folder.

Load the external file.

//in the configuration section load the style
CKEDITOR.editorConfig = function( config ) {

   // For a definition in an external file.
   config.stylesSet = 'my_styles:http://www.example.com/styles.js';
};

 

Cookbook Category: 

Add new comment