why have an external css file definition ?

Hi

I added the following line to my js config file :
config.contentsCss = 'http://www.mysite.com/css/dynamic-styles.css';

CKEDITOR.editorConfig = function( config )
{
   config.toolbar_Full =
   [
      ['Source','Preview'],
      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
      '/',
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
      ['Link','Unlink','Anchor'],
      ['Image','Flash','Table','SpecialChar'],
      '/',
      ['Styles','Format','Font','FontSize'],
      ['TextColor','BGColor']
   ];
   config.height = 600;
   config.toolbar = 'Full';
   config.resize_enabled = false;
   config.language = 'fr';
   config.contentsCss = 'http://www.mysite.com/css/dynamic-styles.css';
};

and I was expecting see the styles become available in the styles combo box in the editor. When they didn't, I looked more carefully at the documentation and saw that the combo box styles have to be defined separately in a file. ok, no problem.

But what then is the purpose of the external contentsCss file ? - the classes defined in it don't seem to be being applied to the content in the editor textarea.

Wed, 03/31/2010 - 16:47

steampunk

Joined: 31/03/2010

Posts: 3

Re: why have an external css file definition ?

ahaaaaa !!!

found it : I needed to add

config.bodyClass = "content";

to the config file - "content" is the class of the wrapper div that holds the dynamic text in my page - the text in the text box in the editor is now formated the same way

but it does seem a bit round-the-houses to use 1 file to format the text and then have to write all the classes into the styles combo config, too.

Thu, 04/08/2010 - 19:48

bpeskoe

Joined: 04/10/2007

Posts: 5

Re: why have an external css file definition ?

Anyone associated with development have a response to this? I am installing / configuring CKEditor 3.x now on a site for the first time (after using 2.x for a long time), and I, too, find it a bit frustrating to have to define all of the styles for the stylesCombo box using the somewhat difficult syntax of the stylescombo default.js file.

It would be MUCH much simpler and easier if the stylescombo box could automatically pull the style names / definitions directly from the external CSS file without this added step.

Or is this already possible and I am just missing it?

Fri, 04/09/2010 - 09:51

technolingua

Joined: 09/04/2010

Posts: 1

Re: why have an external css file definition ?

This was exactly what I was looking for, thank you so much. I wanted to show the text formatted with my websites styles and was able to do so very cleanly.

Instead of editing a config file, I just put my configuration directly in my javascript file with the intent of moving it over later if need be (the syntax is different, and that is why). By adding the css file, all the style drop downs came across as being styled correctly. Very nice.

Here's my config so far:

   var editor = CKEDITOR.replace( 'story_body',
      {
         toolbar : 
            [
               ['Source'],
               ['PasteFromWord','-', 'Scayt'],
               ['RemoveFormat', '-', 'Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
               ['NumberedList','BulletedList'   ],
               ['Link','Unlink','Anchor'],
               ['Image', 'HorizontalRule', 'CreateDiv'],
               ['Format'],
            ],
            height : 500,
            bodyClass : "editor_body",
            contentsCss : '/stylesheets/screen.css'
      } );
               .....

I had to modify my css to have the default body get reset to what I expected to see as my screen.css sets a color and align to the body tag:

body.editor_body, body.cke_ltr {
   background-color: white;
   margin: 0;
   text-align: left;
}

body.editor_body {
   padding: 5px;
}

Mon, 10/25/2010 - 18:47

paniolo

Joined: 18/05/2010

Posts: 5

Re: why have an external css file definition ?

Technolingua, is editor_body a special class or ID built in, or just a name you chose? If you chose it, did you just surround the editor with this?

Mon, 11/08/2010 - 17:17

garry.yao

Joined: 03/01/2009

Posts: 170

Re: why have an external css file definition ?

bpeskoe wrote:Anyone associated with development have a response to this? I am installing / configuring CKEditor 3.x now on a site for the first time (after using 2.x for a long time), and I, too, find it a bit frustrating to have to define all of the styles for the stylesCombo box using the somewhat difficult syntax of the stylescombo default.js file.

It would be MUCH much simpler and easier if the stylescombo box could automatically pull the style names / definitions directly from the external CSS file without this added step.

Or is this already possible and I am just missing it?

In 2.x we used XML format for styles combo definition, while CKEditor choose to a js file so you can load it cross domain, we really hope you can adapt to the new way of definition, actually if you find it inconvenient and would keep styles inside content stylesheet just like this sample page does.