Custom Styles not Displayed in Editor

[mvlcek]

I'm using the following setup, which shows the styles in the styles dropdown as well as showing the site's styles in the WYSIWYG area.

gsconfig.php:

Code:

define('GSEDITOROPTIONS',
  " toolbar: [
            ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Outdent', 'Indent'],
      ['Table', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
      '/',
      ['Styles','Format'],
    ],
    stylesCombo_stylesSet: 'my_styles:/theme/Choice/styles.js',
    contentsCss: '/theme/Choice/default.css',
    bodyId: 'content'
");

(as Connie has already pointed out to me, I could have defined the toolbar within GSEDITORTOOL)

theme/Choice/styles.js:

Code:

CKEDITOR.addStylesSet( 'my_styles',
[
    // Block Styles
    { name : 'Normal', element : 'p', attributes : { } },
    { name : 'Motto1', element : 'p', attributes : { 'class' : 'motto1' } },
    { name : 'Motto2', element : 'p', attributes : { 'class' : 'motto2' } },
    { name : 'Motto3', element : 'p', attributes : { 'class' : 'motto3' } },
    { name : 'Rechts', element : 'p', attributes : { 'class' : 'rfloat' } },
    { name : 'Links', element : 'p', attributes : { 'class' : 'lfloat' } },

    // Inline Styles
    { name : 'Code', element : 'span', attributes : { 'class' : 'code' } },
]);

theme/Choice/template.php (important: use same ID for content div as for bodyId in CKEDITOR settings):

Code:

...
  <div id="content" class="<?php echo return_page_slug(); ?>">
    <h1 id="pagetitle"><?php echo stripslashes($title); ?></h1>
    <?php get_page_content(); ?>
  </div>
...

theme/Choice/default.css (important: use body#content for editor specific styles, like reset padding, margin, etc.; specify the styles for the style dropdown without #content)

Code:

body#content { /* for the editor */
  width: 94%;
  ...
}
#content p { /* for site and editor */
  ...
}
...
.motto1 { /* without #content */
  ...
}

Finally press F5 multiple times in your browser, clear the cache, etc. until the editor looks the same as the site ;-)