Add Custom Formatter To Dropdown Format

The Format plugin provides the ability to add block-level text formatting to your document. This module is already included in the standard build. When enabled, it introduces the Paragraph Format toolbar button that applies these text formats. The formats work on block level which means that you do not need to select any text in order to apply them and entire blocks will be affected by your choice.

Add/Remove Form

To add or remove formats we simple specify the formats that should be available via the config.format_tags configuration.

There are a number of predefined format p,h2,h2,h3,h4,h5,h5,pre,address,div. However, we can define our own as we'll see later on.

// Default the module comes with the 
//p,h2,h2,h3,h4,h5,h5,pre,address,div tags enabled in the format dropdown.
//this is done via the following config.
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

//we can limit the the enabled element by specifying the ones that should be enabled.
config.format_tags = 'p;h1;h2;pre;div';

Custom Format

Custom formats can be defined using config.format_tags and config.format_ configurations.

  //display existing H1,H2 tags in the format dropdown.
  //add a new format called warning which we'll define below.
  config.format_tags = 'h1;h2;warning';

  //define our warning format.
  //config.format_<TAG_NAME>
  //create a div tag with the specified attributes.
  config.format_warning = { element : 'div', attributes : { 'class' : 'warning' }, styles: { color: 'red'} };


Output For Custom Tag:

<div class="warning" style="color:red;"></div>

Alter Existing Format Tags

//alter the built-in H1 format tag.
config.format_h1 = { element: 'h1', attributes: { 'class': 'editorTitle1' } };

Usage Example:

For more on how to configure ckeditor see here.

Example 1:

The code should be placed in one of the configuration options available. This is typically via the config.js or directly on the editor instance when it is being initialized.

In this example we'll display H1,H2 tag in the dropdown. We'll also include a custom tag called "warning".

When when clicked it will generate the following code.

<div class="warning" style="color:red;"></div>

This is the configuration file. This the default config.js file in ckeditor's root directory or a custom override config.js that we defined.

//in a configuration file such config.js in the rook ckeditor folder
CKEDITOR.editorConfig = function( config ) {
  //display existing H1,H2 tags in the format dropdown.
  //add a new format called warning which we'll define below.
  config.format_tags = 'h1;h2;warning';

  //define our warning format.
  //config.format_<TAG_NAME>
  //create a div tag with the specified attributes.
  config.format_warning = { element : 'div', attributes : { 'class' : 'warning' }, styles: { color: 'red'} };
};
Example 2:
//enable per editor instance
CKEDITOR.replace( 'editor1', {
    format_tags: 'p;h1;h2;pre;div'
});

 

Cookbook Category: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.