Drupal and CKEditor - custom config

Dec 28th, 2013

Updated Aug 6, 2015

Here's how to customize CKEditor in Drupal 7. I recommend using the WYSIWYG module instead of the CKEditor module if you plan on having media module integration. I was not able to get media module working with youtube videos and CKEditor 4+ and apparently that's a known issue (Apr 26 2014).

Create a module (only needed if using the WYSIWYG module)

This was tested on:

CKEditor 4.3.1 and the WYSIWYG module version 7.x-2.x-dev from 2013-Oct-26
CKEditor 4.3.4 and the WYSIWYG module version 7.x-2.x-dev from 2014-Mar-20

 <?php
 
/**
 * @file
 * example.module
 */
 
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function example_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor === 'ckeditor') {
    $settings['customConfig'] = base_path() . drupal_get_path('module', 'example') . '/example_config.js';
  }
}
 
?>

Add JS config file

*Important: You'll need to check the "Apply simple source formatting" option in the "Cleanup and output" text format options for the indentation options to take effect. See the section titled "WYSIWYG Module settings" below.

// http://docs.ckeditor.com/#!/api/CKEDITOR.config
 
// Uses 2 spaces instead of a tab for indentation.
CKEDITOR.config.dataIndentationChars = ' ';
CKEDITOR.config.tabSpaces = 2;
 
// Sets custom colors
CKEDITOR.config.colorButton_colors = "000,fff,544741,f16464,fdb415,ffe55e,d5e259,8bbfc6";
 
// Restricts font selection.
CKEDITOR.config.font_names = "'Helvetica Neue', Helvetica, Arial, sans-serif;ge-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif;ge-serif,Georgia,serif;";
 
// Allows empty <i> elements for font icons.
// @see http://zurb.com/playground/foundation-icon-fonts-3 for an example
CKEDITOR.dtd.$removeEmpty.i = 0;
 
// Styles the table plugin.
CKEDITOR.on('dialogDefinition', function(ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
 
  if (dialogName == 'table') {
    var info = dialogDefinition.getContents('info');
    info.get('txtWidth')[ 'default' ] = '100%';
    info.get('txtBorder')[ 'default' ] = '0';
    info.get('txtCellSpace')[ 'default' ] = '0';
    info.get('txtCellPad')[ 'default' ] = '0';
  }
});
 
// Adds a dark bootstrap button style.
CKEDITOR.stylesSet.add('default', [
  {
    name: 'Button Dark',
    element: 'a',
    attributes: {
      'class': 'btn btn-inverse'
    }
  }
]);
 
 
// Resizes editor for specific fields when initially loaded.
(function() {
  var instanceNames = {
    'edit-field-my-field-und-0-value': 200, 
    'edit-field-my-other-field-und-0-value': 200, 
    'edit-body-und-0-value': 350
  };
 
  CKEDITOR.on('instanceCreated', function(e) {
    var instance = e.editor;
 
    if (instanceNames[instance.name] !== "undefined") {
      instance.on('instanceReady', function(e) {
        var height = instanceNames[instance.name];
        e.editor.resize('100%', height);
      });
    }
  });
})();

WYSIWYG Module settings

Cleanup and output:

Apply simple source formatting: yes
Mode: Custom
Content Rules:
- a[*](*);i[*](*);b[*](*);em[*](*);strong[*](*);cite[*](*);blockquote[*](*);code[*](*);ol[*](*);ul[*](*);li[*](*);dl[*](*);dt[*](*);dd[*](*);img[*](*);p[*](*);br[*](*);h1[*](*);h2[*](*);h3[*](*);h4[*](*);h5[*](*);h6[*](*);figure[*](*);figcaption[*](*);pre[*](*);sub[*](*);sup[*](*);tbody[*](*);th[*](*);tr[*](*);td[*](*);thead[*](*);caption[*](*);colgroup[*](*);tfoot[*](*);table[id,summary](*);span[*](*);
- These rules disallow certain table attributes which simplifies the table creation / edit dialog.

Plugin example:

Drupal and CKEditor - custom plugin example - Bootstrap 3 glyphicons

CKEditor module

If you are using the CKEditor module instead of the WYSIWYG module, then you can enter in custom configuration in the admin UI, which includes some nice inline help.