Custom ckeditor.styles.js file with WYSIWYG module

Question

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.

Answer 1

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:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { 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' } },
  ]);

Answer 2

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!

5. How to use the setup as an editor!

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

Answer 3

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";
  }
}

Answer 4

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.

Answer 5

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.