How to add a custom paragraph format in CKEditor

Question

In my project I have a requirement to remove the paragraph format like "Address" and "Formatted" from the drop down and to add a new custom format called "Links" which would be Arial, 14px, bold, red. Is it possible to add custom paragraph format in CKEditor?

Answer 1

Use CKEDITOR.config.formatTags to specify some new formatting:

CKEDITOR.replace( 'editor1', {
    format_tags: 'p;h2;h3;pre;links', // entries is displayed in "Paragraph format"
    format_links: {
        name: 'Links',
        element: 'span',
        styles: {
            color: 'red',
            'font-family': 'arial',
            'font-weight': 'bold'
        }
    }
} );

To know more about styles see how CKEDITOR.styleSet works. Also note that since CKEditor 4.1, removing styles from "Paragraph format" has an impact on Advanced Content Filter.

Answer 2

Since you're working with Drupal, ckeditor.styles.js is the file you're looking for, this will allow you to add/edit/remove entries in the Styles menu.

Comment out any entries you don't want, and use something like this to add a new paragraph format:

{ name : 'Links', element : 'p', attributes : { 'class' : 'links' } },

This will add the CSS class links to whatever paragraph you want, and you can define the class in your theme stylesheet. Make sure to define the class in ckeditor.css if you don't see the changes applied in the CKEditor instance.

Alternatively, you could also apply the inline styles directly:

{ name : 'Links', element : 'p', attributes : { 'style' : 'font: bold 14px Arial, sans-serif; color: red;' } },

But the first method is clearly more flexible/clean.

Make sure to clear your Drupal and/or browser cache if you don't see your changes show up immediately.