CKEditor and custom styles not showing in Dropdown box

Feb 3, 2010 at 11:01 AM

As I understand the custom style creation and injection into CKEditor you have to define a custom style_definiton.js file and than point to that file with the Custom Editor Options. When I try to do so I get an empty Styles Dropdown and ckeditor.js throws an error on line 70: w is undefined.

I created the custom styles js file by copying the one from styles_combo plugin folder into the portal root folder and then editing it. Did I miss something? Any suggestions?

Feb 3, 2010 at 11:25 AM

 

i think the js you try to use is wrong. Here is my sample ckstyles.js that i use

CKEDITOR.addStylesSet('CustomStyles',
[
// Block Styles
//{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
{ name : 'TextHeader', element : 'p', attributes : { 'class' : 'textHeader' } },
{ name : 'TextNormal', element : 'p', attributes : { 'class' : 'textNormal' } },
{ name : 'TextNormal Fett', element : 'p', attributes : { 'class' : 'textNormalBold' } },
{ name : 'TextSmall', element : 'p', attributes : { 'class' : 'textSmall' } },
{ name : 'TextSmallHeader', element : 'p', attributes : { 'class' : 'textSmallHeader' } },

// Inline Styles
//{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
{ name : 'TextHeader', element : 'span', attributes : { 'class' : 'textHeader' } },
{ name : 'textNormal', element : 'span', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal Fett', element : 'span', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textSmall', element : 'span', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmallHeader', element : 'span', attributes : { 'class' : 'textSmallHeader' } },

// Object Styles
{ name : 'TextHeader a', element : 'a', attributes : { 'class' : 'textHeader' } },
{ name : 'textNormal', element : 'a', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal', element : 'table', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal', element : 'td', attributes : { 'class' : 'textNormal' } },
{ name : 'textNormal Fett', element : 'a', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textNormal Fett', element : 'table', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textNormal Fett)', element : 'td', attributes : { 'class' : 'textNormalBold' } },
{ name : 'textSmall', element : 'a', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmall', element : 'table', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmall', element : 'td', attributes : { 'class' : 'textSmall' } },
{ name : 'textSmallHeader', element : 'a', attributes : { 'class' : 'textSmallHeader' } },
{ name : 'textSmallHeader', element : 'table', attributes : { 'class' : 'textSmallHeader' } },
{ name : 'textSmallHeader', element : 'td', attributes : { 'class' : 'textSmallHeader' } },
]);

I use css classes and i also have the css which must be defined in the options. that includes the css classes above so that the editor can display them correctly.

I also recommend the Documentation of the Editor

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

 

 

Feb 3, 2010 at 11:44 AM

Thanks, for the quick reply!

I've replaced the content of my styles.js with the one you provided and now its working, also I dont know why!? I used the initial file witch is working after installation. Just played with the names and changing some values of the supplied styles. Odd - but now it's working.

Thanks, again!

 

Mar 16, 2010 at 5:25 PM

I had a similar problem - It was fixed by making sure I set the style set to "CustomStyles" (see the first line of the example style list above).