Tuesday, 8 July 2014

Drupal 7 - CKEditor - Create Custom Styles.

To Create Our Own Styles to display them in CKEditor, we have to follow below mentioned steps.

Adding Styles Drop down to CKEditor:
  • By default, CKEditor will not be having option to select styles.
  • Add styles down to editor by configuring CKEditor Settings.
    • Go to Configuration -> Content Authoring -> CKEditor (admin/config/content/ckeditor)
    • Select Edit option related to the Profile Which you are using in your application. In my case i am using Full Profile. So, clicking on Edit option related to Full Profile (admin/config/content/ckeditor/edit/Full)
    • Expand Edit Appearance fieldset by clicking on  Edit Appearance toggle set.
    • Place Styles Drop down into Used Buttons region from Full Buttons Region
    •  Click on Save button at the bottom of page.
Create Custom Styles:
  • Custom CSS can be created from ckeditor.styles.js file.
  • This file by default got located in /sites/all/modules/ckedior/ckeditor.styles.js.
  • Copy the file and place it in your user current theme folder. In my case my UI theme is bartik. So, i am placing ckeditor.styles.js file into /themes/bartik/ckeditor.styles.js.
  • Open the file.
  • Remove unnecessary styles from list.

  • Add your own styles.
    • Example: If you want add "cinimatography" class to selected text with an additional div added to it, use below code.
      • { name : 'Cinematography' , element : 'div', attributes : { 'class' : 'cinimatography' } },
    • Name: This value will get displayed in CKeditor's Styles Drop down.
    • Element: Tag will be added to the selected text.
    • attributes: We can able add classes to the elements.
    • styles: We can able to add property value pairs. Example, color, background-color etc.
  • After adding all the necessary styles, you can Save the file.
Make sure our Custom Styles get displayed in CKEditor Properly:
    • To Display our custom CSS in Styles drop down, first we have to tell the CKEditor to consider ckeditor.styles.js file from our theme folder. To do that,
    •  Go to Configuration -> Content Authoring -> CKEditor (admin/config/content/ckeditor)
    • Select Edit option related to the Profile Which you are using in your application. In my case i am using Full Profile. So, clicking on Edit option related to Full Profile (admin/config/content/ckeditor/edit/Full)
    • Expand CSS fieldset by clicking on CSS toggle set.
    • There you could able to see different options. We have to configure them.
      • Change Predefined styles to
        Define path to ckeditor.styles.js
      •  Set Predefined styles path to %tckeditor.styles.js?v1 (%t – path to current user theme. By Default Drupal 7 uses bartik theme. If you did not enable any other theme, your theme would be bartik only.)
    • Expand Advanced Options fieldset by clicking on Advanced Options toggle set.
    • There you could able to see Custom JavaScript configuration Text area.
    • Add config.allowedContent = true; line into that text area. This option is used to allow CKEditor to hold the classes, styles that we are adding using editor.
    • After making all changes. Save the Configuration form.


Go to Content Add / Edit Page. See that new updates available under Styles Drop Down.

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.