Enhancing the editor

This page shows how to add the following functionality to the GetSimple editor:

• Indent/Outdent
• Style select with your own special block and inline styles
• Format select

I'm using the following setup, which adds Indent/Unindent buttons to the editor's toolbar and also shows the styles in the styles dropdown as well as showing the site's styles in the WYSIWYG area.

gsconfig.php (replace Choice in the code with your theme):

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)

create a file theme/Choice/styles.js (replace Choice with your theme) and add the styles you want to make available for the user:

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' } },
]);

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

...
  <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; replace Choice with your theme):

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 ;-)

 

(see also http://get-simple.info/forums/showthread.php?tid=2193&pid=16728#pid16728 and following posts)