+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: [SOLVED] CKEditor backend styles (/showthread.php?tid=4691)
[SOLVED] CKEditor backend styles - TeeJay - 2013-04-28
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/stylesI 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'}}]);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' }}
]);RE: [SOLVED] CKEditor backend styles - Kida - 2013-04-30
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
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-04-30
(2013-04-30, 22:00:02)Kida Wrote: Hi!Yes, it is possible, see GetSimple wiki in the lower part.
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
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
RE: [SOLVED] CKEditor backend styles - Kida - 2013-04-30
ah! perfect!! thank you soooo much!!!
RE: [SOLVED] CKEditor backend styles - Kida - 2013-05-03
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.....
RE: [SOLVED] CKEditor backend styles - shawn_a - 2013-05-03
Could be cache
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-04
(2013-05-03, 20:37:28)Kida Wrote: 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
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
RE: [SOLVED] CKEditor backend styles - shawn_a - 2013-05-04
or just clear browser cache. lol
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-04
(2013-05-04, 04:34:43)shawn_a Wrote: or just clear browser cache. lolWell, I store both the cookies and cache for a month, so after the restart, the cache is still there, not deleted.
RE: [SOLVED] CKEditor backend styles - shawn_a - 2013-05-04
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.
RE: [SOLVED] CKEditor backend styles - Kida - 2013-05-05
worked!! thanks so much!!
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-05
(2013-05-04, 04:54:50)shawn_a Wrote: 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.
(2013-05-05, 08:10:44)Kida Wrote: 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.
RE: [SOLVED] CKEditor backend styles - shawn_a - 2013-05-06
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.
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-06
(2013-05-06, 00:37:30)shawn_a Wrote: 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.
RE: [SOLVED] CKEditor backend styles - shawn_a - 2013-05-06
I have found that Ctrl f5 is very unreliable and usually does nothing. But it's worth a try sometimes.
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-06
(2013-05-06, 07:35:56)shawn_a Wrote: 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.
RE: [SOLVED] CKEditor backend styles - TeeJay - 2013-05-06
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.