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

[Kida]

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

[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

[Kida]

ah! perfect!! thank you soooo much!!!

[Kida]

Hm, okay, sadly: that didn't not solve it
I tried using my own .js-file, but that didn't work.... and I now replaced the content of the original default.js with yours above... still, I get only the same elements as before, nothing is changing. I have no idea what I'm doing wrong here it seems like he isn't using the default.js at all.....

[shawn_a]

Could be cache

[TeeJay]

Hm, okay, sadly: that didn't not solve it
I tried using my own .js-file, but that didn't work.... and I now replaced the content of the original default.js with yours above... still, I get only the same elements as before, nothing is changing. I have no idea what I'm doing wrong here it seems like he isn't using the default.js at all.....

Sorry, I forgot to mention that it's needed to quit your browser and restart your PC in order to make it use your new/updated default.js correctly. There is apparently some cache problem (as Shawn says) that can be solved by the restart. Yes, sure it could be solved some better way but I don't really care since I have bought an SSD

[shawn_a]

or just clear browser cache. lol

[TeeJay]

or just clear browser cache. lol

Well, I store both the cookies and cache for a month, so after the restart, the cache is still there, not deleted.

[shawn_a]

Most browsers let you clear cache, also I just read you can add a time stamp parameter to ckeditor that appends to all assets. Ill look into that.

[Kida]

worked!! thanks so much!!

[TeeJay]

Most browsers let you clear cache, also I just read you can add a time stamp parameter to ckeditor that appends to all assets. Ill look into that.

Yes, I'm using Opera and I can clear the cache. I just wanted to emphasize that after the restart which helps me every time the browser's cache is not cleared and it still works; if you know what I mean.

About the time stamp, it's longer there for a reason, cache which would be deleted every few minutes wouldn't make sense at all. Maybe there is also something more like "delete after a comp restart" or something similar in that meaning, I don't really know.

worked!! thanks so much!!

You're welcome. I spend a lot of time trying to figure it out, so I'm glad that it helps people.

[shawn_a]

ckeditor has a timestamp config for anti cache for development purposes. It adds the timestamp to the end of each request so the urls are unique everytime so not cacheable.

Im just saying a full reboot is never necessary for clearing cache, very overkill.

I use chrome console with cache disabled, so when the console is open there is no caching , most browsers also have this available for development.

[TeeJay]

very overkill

You made me laugh, thank you

Yes, I have just found out that there's something like Ctrl+F5 and Shift+F5 for uncached reloading...

So we are clear.

[shawn_a]

I have found that Ctrl f5 is very unreliable and usually does nothing. But it's worth a try sometimes.

[TeeJay]

I have found that Ctrl f5 is very unreliable and usually does nothing. But it's worth a try sometimes.

Seems more and more like 20 secs of reboot is still the way to go well, just kidding.

I have to say that I haven't found disabling caching for a short time in Opera Dragonfly, which is Opera's develop tool. But deleting them in Settings could do it's job. So, thanks for these ideas, I'll take account of them.

[TeeJay]

I have just had an opportunity to try, I had cached images on a site that I changed and refresh was doing nothing. Shift + F5 did it's job. So it works at least in Opera.