[SOLVED] CKEditor backend styles

[TeeJay]

Hello,
I just can't seem to make my styles work in the CKEditor of GetSimple.

In here...

Code:

/mydomain.cz/admin/template/js/ckeditor/plugins/styles/styles

I edited the default.js to this

Code:

/*
Copyright (c) 2003-2011...
*/

CKEDITOR.stylesSet.add('default',[
    {name:'oddíl',element:'div'},
    {name:'tabulka',element:'table'}
    
    {name:'obrazekVlevo',element:'img',attributes:{'class':'obrazek-vlevo'}},
    {name:'obrazekVpravo',element:'img',attributes:{'class':'obrazek-vpravo'}},
  
]);

It worked. However, after adding some more lines, it stopped working. The list is empty now.

Code:

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

CKEDITOR.stylesSet.add('default',[
    {name:'oddíl',element:'div'},
    {name:'tabulka',element:'table'}
    
    {name:'obrazekVlevo',element:'img',attributes:{'class':'obrazek-vlevo'}},
    {name:'obrazekVpravo',element:'img',attributes:{'class':'obrazek-vpravo'}},
  
    {name:'odstavecDulezite',element:'p',attributes:{'class':'odstavecDulezite'}},
    {name:'odstavecVystraha',element:'p',attributes:{'class':'odstavecVystraha'}},
    {name:'odstavecRada',element:'p',attributes:{'class':'odstavecRada'}},
    {name:'odstavecPoznamka',element:'p',attributes:{'class':'odstavecPoznamka'}},
    {name:'odstavecPotvrzeni',element:'p',attributes:{'class':'odstavecPotvrzeni'}},
    
    {name:'radekLichy',element:'tr',attributes:{'class':'radekLichy'}},
    {name:'radekSudy',element:'tr',attributes:{'class':'radekSudy'}},
    
    {name:'kulataOdrazka',element:'li',attributes:{'class':'seznamObrazkovy'}}

]);

What am I doing wrong? Thanks for any help.

I know that it would be better to create/download a separate file, but it wouldn't work either if it's not working this way I think.

Tom


Edit://
I forgot to mention that the "real" default styles which comes with GS works properly.

Code:

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

CKEDITOR.stylesSet.add('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},{name:'Red Title',element:'h3',styles:{color:'Red'}},{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'}},{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}},{name:'Borderless Table',element:'table',styles:{'border-style':'hidden','background-color':'#E6E6FA'}},{name:'Square Bulleted List',element:'ul',styles:{'list-style-type':'square'}}]);

However, all the styles are useless for me. I'm not going to change my logically named and structured CSS in Czech, that's not the way I want to go.

I made a special file (see below, couldn't attach .js file) which is not compressed and I'll see if it works. These changes doesn't take effect after a page refresh, so I have to do usually more than that and it's slower and not comfortable much...

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 : 'odstavecDulezite',  element : 'p', attributes:{'class':'odstavecDulezite'  }},
  {name : 'odstavecVystraha',  element : 'p', attributes:{'class':'odstavecVystraha'  }},
  {name : 'odstavecRada',      element : 'p', attributes:{'class':'odstavecRada'      }},
  {name : 'odstavecPoznamka',  element : 'p', attributes:{'class':'odstavecPoznamka'  }},
  {name : 'odstavecPotvrzeni', element : 'p', attributes:{'class':'odstavecPotvrzeni' }},
    
    /* 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' } },
  */
  
  { name : 'oddíl', element: 'div' },
  { name : 'tabulka', element: 'table '},
  
    /* Object Styles */
  
  { name : 'obrazekVlevo',  element : 'img', attributes : { 'class' : 'obrazek-vlevo'   }},
  { name : 'obrazekVpravo', element : 'img', attributes : { 'class' : 'obrazek-vpravo'  }},
    
  { name : 'kulataOdrazka', element : 'li',  attributes : { 'class' : 'seznamObrazkovy' }},

  { name : 'radekLichy',    element : 'tr',  attributes : { 'class' : 'radekLichy' }},
  { name : 'radekSudy',     element : 'tr',  attributes : { 'class' : 'radekSudy'  }}
]);

Edit2:// It works now. I don't know why it didn't with the default default.js, but with my downloaded and edit it works. So here's what I needed:

Code:

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 : 'odstavecDulezite',  element : 'p', attributes:{'class':'odstavecDulezite'  }},
  {name : 'odstavecVystraha',  element : 'p', attributes:{'class':'odstavecVystraha'  }},
  {name : 'odstavecRada',      element : 'p', attributes:{'class':'odstavecRada'      }},
  {name : 'odstavecPoznamka',  element : 'p', attributes:{'class':'odstavecPoznamka'  }},
  {name : 'odstavecPotvrzeni', element : 'p', attributes:{'class':'odstavecPotvrzeni' }},
    
    /* 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' } },
  */
  
  { name : 'oddíl', element: 'div' },
  { name : 'tabulka', element: 'table '},
  
    /* Object Styles */
  
  { name : 'obrazekVlevo',  element : 'img', attributes : { 'class' : 'obrazek-vlevo'   }},
  { name : 'obrazekVpravo', element : 'img', attributes : { 'class' : 'obrazek-vpravo'  }},
    
  { name : 'kulataOdrazka', element : 'li',  attributes : { 'class' : 'seznamObrazkovy' }},

  { name : 'radekLichy',    element : 'tr',  attributes : { 'class' : 'radekLichy' }},
  { name : 'radekSudy',     element : 'tr',  attributes : { 'class' : 'radekSudy'  }}
]);