[SOLVED] CKEditor backend styles

[TeeJay]

Hi!

I'm very new to GetSimple and I was just wondering, if it's possible to add Styles, that can be selected by the editor within the HTML Editor in the Backend... with your post I see, it is... I navigated to the path above and noticed, there are already styles in included in the default.js... only: I can't select them in the HTML editor. Do I need a special plugin or setting for that??
Sorry for the dumb question, but I'm actually lost here...

Hope someone can tell me how to activate the styles, so my editors can use them.

Best,
Kida

Yes, it is possible, see GetSimple wiki in the lower part.
To start, you can easily edit the default.js found in yourdomain\admin\template\js\ckeditor\plugins\styles\styles.

You can also get inspired for example by my default.js (It's just edited original CKEditor default.js from CKEditor website, you can find the link in the wiki I posted a link to). I think you can comprehend a lot after seeing that.

Code:

/*
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.stylesSet.add( 'default',
[
    /* Block Styles */

    // These styles are already available in the "Format" combo, so they are
    // not needed here by default. You may enable them to avoid placing the
    // "Format" combo in the toolbar, maintaining the same features.
    /*
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Heading 1'        , element : 'h1' },
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Heading 5'        , element : 'h5' },
    { name : 'Heading 6'        , element : 'h6' },
    { name : 'Preformatted Text', element : 'pre' },
    { name : 'Address'            , element : 'address' },

    { name : 'Blue Title'        , element : 'h3', styles : { 'color' : 'Blue' } },
    { name : 'Red Title'        , element : 'h3', styles : { 'color' : 'Red' } },
  */
  
  {name : 'odstavecUvodnik',  element : 'p', attributes : { 'class' : 'odstavecUvodnik'   }},
  {name : 'odstavecZeleny',   element : 'p', attributes : { 'class' : 'odstavecPotvrzeni' }},
  {name : 'odstavecModry',    element : 'p', attributes : { 'class' : 'odstavecDulezite'  }},
  {name : 'odstavecCerveny',  element : 'p', attributes : { 'class' : 'odstavecVystraha'  }},
  {name : 'odstavecZluty',    element : 'p', attributes : { 'class' : 'odstavecRada'      }},
  {name : 'odstavecSedy',     element : 'p', attributes : { 'class' : 'odstavecPoznamka'  }},
  {name : 'odstavecBily',     element : 'p', attributes : { 'class' : 'odstavecCitace'    }},

  {name : 'odstavecVystraha',  element : 'p', attributes : { 'class' : 'odstavecVystraha vystrahaM'   }},
  {name : 'odstavecPotvrzeni', element : 'p', attributes : { 'class' : 'odstavecPotvrzeni potvrzeniM' }},
  {name : 'odstavecPoznamka',  element : 'p', attributes : { 'class' : 'odstavecPoznamka poznamkaM'   }},
  {name : 'odstavecRada',      element : 'p', attributes : { 'class' : 'odstavecRada radaM'           }},
  {name : 'odstavecDulezite',  element : 'p', attributes : { 'class' : 'odstavecDulezite duleziteM'   }},
  {name : 'odstavecCitace',    element : 'p', attributes : { 'class' : 'odstavecCitace citaceM'       }},
  
  {name : 'pozadiVyhoda',      element : 'div', attributes : { 'class' : 'pozadiVyhoda vyhodaM'       }},
  {name : 'pozadiNevyhoda',    element : 'div', attributes : { 'class' : 'pozadiNevyhoda nevyhodaM'   }},
    
    /* Inline Styles */

    // These are core styles available as toolbar buttons. You may opt enabling
    // some of them in the Styles combo, removing them from the toolbar.
    /*
    { name : 'Strong'            , element : 'strong', overrides : 'b' },
    { name : 'Emphasis'            , element : 'em'    , overrides : 'i' },
    { name : 'Underline'        , element : 'u' },
    { name : 'Strikethrough'    , element : 'strike' },
    { name : 'Subscript'        , element : 'sub' },
    { name : 'Superscript'        , element : 'sup' },

    { name : 'Marker: Yellow'    , element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Marker: Green'    , element : 'span', styles : { 'background-color' : 'Lime' } },
  
    { name : 'Big'                , element : 'big' },
    { name : 'Small'            , element : 'small' },
    { name : 'Typewriter'        , element : 'tt' },

    { name : 'Computer Code'    , element : 'code' },
    { name : 'Keyboard Phrase'    , element : 'kbd' },
    { name : 'Sample Text'        , element : 'samp' },
    { name : 'Variable'            , element : 'var' },

    { name : 'Deleted Text'        , element : 'del' },
    { name : 'Inserted Text'    , element : 'ins' },

    { name : 'Cited Work'        , element : 'cite' },
    { name : 'Inline Quotation'    , element : 'q' },

    { name : 'Language: RTL'    , element : 'span', attributes : { 'dir' : 'rtl' } },
    { name : 'Language: LTR'    , element : 'span', attributes : { 'dir' : 'ltr' } },
  */
  
    /* Object Styles */
  
  { name : 'obrazekVlevo',             element : 'img', attributes : { 'class' : 'obrazek-vlevo'                       }},
  { name : 'obrazekVpravo',            element : 'img', attributes : { 'class' : 'obrazek-vpravo'                      }},
  { name : 'obrazekBezRameckuVlevo',   element : 'img', attributes : { 'class' : 'obrazek-vlevo  obrazek-bezramecku'   }},
  { name : 'obrazekBezRameckuVpravo',  element : 'img', attributes : { 'class' : 'obrazek-vpravo obrazek-bezramecku'   }},
  
  { name : 'radekLichy',     element : 'tr',  attributes : { 'class' : 'radekLichy'      }},
  { name : 'radekSudy',      element : 'tr',  attributes : { 'class' : 'radekSudy'       }},

  { name : 'kulataOdrazka',  element : 'li',  attributes : { 'class' : 'seznamObrazkovy' }},
  
  { name : 'odrazkaCislo1',  element : 'li',  attributes : { 'class' : 'jedna'  }},
  { name : 'odrazkaCislo2',  element : 'li',  attributes : { 'class' : 'dva'    }},
  { name : 'odrazkaCislo3',  element : 'li',  attributes : { 'class' : 'tri'    }},
  { name : 'odrazkaCislo4',  element : 'li',  attributes : { 'class' : 'ctyri'  }},
  { name : 'odrazkaCislo5',  element : 'li',  attributes : { 'class' : 'pet'    }},
  { name : 'odrazkaCislo6',  element : 'li',  attributes : { 'class' : 'sest'   }},
  { name : 'odrazkaCislo7',  element : 'li',  attributes : { 'class' : 'sedm'   }},
  { name : 'odrazkaCislo8',  element : 'li',  attributes : { 'class' : 'osm'    }},
  { name : 'odrazkaCislo9',  element : 'li',  attributes : { 'class' : 'devet'  }},
  { name : 'odrazkaCislo10', element : 'li',  attributes : { 'class' : 'deset'  }}
]);

Basically, you can set there any html attributes including id's and classes and also in-line CSS styles. I think that attributes is all you need. You can also cumulate more styles into one style, see the wiki or the default default.js