How to add 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 list, and add a new custom format called "Links", which will be Arial, 14px, bold, red. Can I add a custom paragraph format in CKEditor?

Answer 1

Use CKEDITOR.config.formatTags to specify the 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 learn more about styles, see how CKEDITOR.styleSet works. Also note that since CKEditor 4.1 removing styles from the “Paragraph Format” affects the Advanced Content Filter .

Answer 2

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

Comment on any posts 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 links class to any paragraph you want, and you can define the class in the theme stylesheet. Be sure to define the class in ckeditor.css if you do not see the changes applied to the CKEditor instance.

Alternatively, you can also directly apply inline styles:

 { 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 you clear your Drupal and / or browser cache if you don’t see that your changes are displayed immediately.