I either call my custom styles "drupal" and erratically get the following error:
Error: [CKEDITOR.resourceManager.add] The resource name "drupal" is already registered.

Or I call them "cc_drupal" and they are not applied to the document, and the styles button is greyed out.

Code:

if(typeof(CKEDITOR) !== 'undefined') {
    CKEDITOR.addStylesSet( 'cc_drupal',
    [
            /* Block Styles */

            // These styles are already available in the "Format" drop-down list, so they are
            // not needed here by default. You may enable them to avoid placing the
            // "Format" drop-down list in the toolbar, maintaining the same features.

            { name : 'Paragraph'    , element : 'p' },
            { name : 'Heading 3'    , element : 'h3' },
            { name : 'Heading 4'    , element : 'h4' },
            { name : 'Heading 5'    , element : 'h5' },
            { name : 'Heading 6'    , element : 'h6' },
            { name : 'Monospaced'   , element : 'pre' },
    ]);
}

Generates error with:
CKEDITOR.addStylesSet( 'drupal',

Comments

glass.dimly created an issue. See original summary.

glass.dimly’s picture

glass.dimly CreditAttribution: glass.dimly commented
Status: Active » Closed (works as designed)

I found the following ckeditor page which was immensely useful: http://docs.ckeditor.com/#!/guide/dev_howtos_styles

I replaced the default styles in the following manner:

function my_module_ckeditor_settings_alter(&$settings, $conf) {
  global $base_url;
  $settings['stylesCombo_stylesSet'] =  'cc_drupal:' . $base_url . '/' .drupal_get_path('module', 'my_module') . '/js/my_module.ckeditor.styles.js';
}

Then in the file location specified above ('my_module/js/my_module.ckeditor.styles.js') I put the following JS:

if (typeof(CKEDITOR) !== 'undefined') {
  CKEDITOR.config.stylesSet = 'cc_drupal';
  CKEDITOR.addStylesSet( 'cc_drupal',
    [
      /* Block Styles */

      // These styles are already available in the "Format" drop-down list, so they are
      // not needed here by default. You may enable them to avoid placing the
      // "Format" drop-down list in the toolbar, maintaining the same features.

      { name : 'Paragraph'    , element : 'p' },
      { name : 'Heading 3'    , element : 'h3' },
      { name : 'Heading 4'    , element : 'h4' },
      { name : 'Heading 5'    , element : 'h5' },
      { name : 'Heading 6'    , element : 'h6' },
      { name : 'Monospaced'   , element : 'pre' },
      // { name : 'Address'      , element : 'address' },

      // Custom styles
      { name : 'Pull Quote: Right'   , element : 'div', attributes : { 'class' : 'cc-content-insert cc-content-insert--right cc-content-insert--pullout-quote' } },
      { name : 'Pull Quote: Center'  , element : 'div', attributes : { 'class' : 'cc-content-insert cc-content-insert--center cc-content-insert--pullout-quote' } },
      { name : 'Pull Quote: Left'    , element : 'div', attributes : { 'class' : 'cc-content-insert cc-content-insert--left cc-content-insert--pullout-quote' } },
    ]);
}

Note: the key line here that I did not seem to see or notice in other tutorials was this:
CKEDITOR.config.stylesSet = 'cc_drupal';

The started code for styles can be got from here: "ckeditor/ckeditor.styles.js"