Add your own styles to Drupal's WYSIWYG module

For a better editing experience on node forms, I installed the WYSIWYG module with the CKEditor plugin. It adds CKEditor to large text fields, but by default it loads CKEditor's predefined styles.

That is fine at first, but I wanted the editor to show the styles from the theme. The WYSIWYG module supports loading stylesheets, but at the time it was buggy with CKEditor.

After some digging, I found that CKEditor 3.6 needs the stylesheetparser plugin, and the WYSIWYG module was not loading it. A tiny module was enough to fix that:

php
<?php
function ckeditor_styles_wysiwyg_editor_settings_alter(&$settings, &$context)
{
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraPlugins'] .= ',stylesheetparser';
        // Not necessary but removes all default styles from the CKEditor.
        $settings['stylesSet'] = array();
    }
}

Now go to admin/config/content/wysiwyg/profile/filtered_html/edit and select Define CSS under Editor CSS. Add the stylesheet URI there, and CKEditor will show your theme styles on every textarea that uses filtered_html.