I am trying to customize the "Font style" dropdown in CKeditor through the WYSIWYG module, but I see no way to specify a path for ckeditor.styles.js in the wysiwyg module's profile editor.

Refer to this post for futher information - it says there should be a way to specify a location for that file.

5 Answers 5


These are 2 ways (there are certainly more) to add custom ckeditor stylesets using the drupal wyswiwyg module.

  1. Using the contributed module Ckeditor Styles
  2. Using hook_wysiwyg_editor_settings_alter as follows:

(code "inspired" by ckeditor_styles module)

In a custom module add the hook_wysiwyg_editor_settings_alter implementation:

 * Implements hook_wysiwyg_editor_settings_alter().
 * @param type $settings
 * @param type $context
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";

and add a file named ckeditor_styles.js in a sub directory js of the custom module:

    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  • I really wanted this to work. I had to use a full path rather than the relative path to the stylesSet file used here, or else the wysiwyg would disappear. Even so, the Styles dropdown was then disabled, and I couldn't figure out the cause. Feb 27, 2015 at 23:44
  • dont forget the global $base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
    – commonpike
    Jul 12, 2017 at 16:52
  • @commonpike you do not need $base_url
    – Felix Eve
    Aug 2, 2017 at 4:51

I do this for my Drupal sites all the time! @marblegravy's answer is a first step, but you may also want to do things like add a corresponding css rules to your CKEditor, so that when your editor is applying one of your custom styles, the editor actually applies them and the editor can preview the changes, without having to save!

I recently wrote a very detailed blog post about all the moving parts here: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

What I cover in the tutorial is

  1. How to customize the toolbar
  2. Creating the custom ckeditor.styles.js file. Here's a sample:

     CKEDITOR.addStylesSet( 'drupal',
     /* Block Styles */
     { name : 'Heading 2'        , element : 'h2' },
     { name : 'Heading 3'        , element : 'h3' },
     { name : 'Heading 4'        , element : 'h4' },
     { name : 'Paragraph'        , element : 'p' },
     { name : 'Blue Image Button',
     element : 'div',
     attributes : {
     'class' : 'blue-image-button' }
     /* Inline Styles */
     { name : 'Inline Quotation'    , element : 'q' },
  3. Configuring your CKEditor so it knows where to find this custom styles file

  4. Implementing the corresponding css to these styles, and letting CKEditor know about these too!

enter image description here

  1. How to use the setup as an editor!

Hope it's helpful! Let us know if you get this working!

  • Where do you do step 3, letting CKEditor know about the custom ckeditor.styles.js file.
    – Batandwa
    Feb 11, 2014 at 14:20
  • 5
    This answer is not correct. The question is about how to solve this using the Drupal Wysiwyg module but the author explains how to solve it using the Drupal CKEditor module. Two different things. The Wysiwyg module has no option to add additional custom.styles.js files
    – batigolix
    Feb 24, 2014 at 20:48

I just wrote a tiny custom module. I'm using the Wysiwyg module (rather than the CKEditor module). This then enables styles from ckeditor.styles.js in my theme to be loaded.

 * Implements hook_wysiwyg_editor_settings_alter().
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  • This should be the answer!!!
    – Alex Gill
    Oct 20, 2015 at 11:32

You can define styles in the WYSIWYG profile settings (admin/config/content/wysiwyg, edit the desired profile).

"CSS" tab > "CSS classes"

Optionally define CSS classes for the "Font style" dropdown list.

Enter one class on each line in the format: [label]=[element].[class]. Example: Title=h1.title

If left blank, CSS classes are automatically imported from loaded stylesheet(s). Uses the stylesSet setting internally.


Just put your overridden ckeditor.styles.js file in the root of your theme, then go to /admin/config/content/ckeditor/edit/, then for each of your profiles, edit them and open up the css fieldset, find the Predefined Styles field and choose Use theme ckeditor.styles.js.

From the *Predefined Style*s field help:

Define the location of the ckeditor.styles.js file. It is used by the Style drop-down list available in the default toolbar. Copy the sites/all/modules/contrib/ckeditor/ckeditor.styles.js file into your theme directory (themes/seven/ckeditor.styles.js) and adjust it to your needs.

  • 3
    This answer also assumes the use of the CKEDitor module, which is not what the question was about
    – batigolix
    Feb 24, 2014 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.