CSS style sheet for content area?

Q: How do I assign a style sheet of my choosing to use in the content area of the CKEditor?

The CSS file I want to use is located in a css folder off the root, something like: http://www.MySite.org/css/UseThisStylesheet.css

My CKEditor folder is also right off the root: http://www.MySite.org/ckeditor/

=================================

The only way I seem to be able to influence the CSS for the content area, is by editing the contents.css file.

There appears to be another way to do it: by editing a line in config.js

from:

contentsCss : CKEDITOR.basePath + 'contents.css',

to:

contentsCss : 'http://www.MySite.org/css/UseThisStylesheet.css',

and I have also tried each of the following:
contentsCss : '../css/UseThisStylesheet.css',
and
contentsCss : './css/UseThisStylesheet.css',
and
contentsCss : '[' + CKEDITOR.basePath + 'contents.css' + ',' + '../css/UseThisStylesheet.css]',

By changing the background color in the contents.css file, I can see that no matter what I put into config.js, the CKEditor is using the contents.css file

So, how do I assign a style sheet of my choosing to use in the content area of the CKEditor?

Thanks,

Dennis

Wed, 10/21/2009 - 12:08

fruitbatinshades

Joined: 25/06/2008

Posts: 40

Re: CSS style sheet for content area?

You need to set the path explicitly.
if your site is running in the root then you just use / so

http:/www.thisIsMySite.com

config.contentsCss = '/css/global.css';

If it is running within sub directory you need to pass that in:

http:/www.thisIsMySite.com/YourSubFolder

config.contentsCss = '/YourSubFolder/css/global.css';

Mon, 10/26/2009 - 20:03

dtleahy

Joined: 09/01/2009

Posts: 50

Re: CSS style sheet for content area?

fruit bat,

Sorry it took me a while to come back to this thread and thank you. You are correct that the assignment of the CSS file is done at the point if instantiating the CKEditor widget. Which means it is done in a page that the developer writes, not by altering the config.js file as I had thought.

<textarea name="MyTextAreaName"></textarea>
         <script type="text/javascript">
            CKEDITOR.replace( 'MyTextAreaName' );            
            CKEDITOR.add
            CKEDITOR.config.contentsCss = '/css/mycssfilename.css' ;            
         </script>

Just thought I'd make that clear if anyone else finds this in a search.

Thanks,

Dennis

Fri, 02/07/2014 - 23:10

dahlsvarehus

Joined: 09/10/2012

Posts: 3

hov can i use it in my php script

in php i have the code

            $js .= "CKEDITOR.replace( 'editor1' );";

so i want to add the

            CKEDITOR.replace( 'MyTextAreaName' );            
            CKEDITOR.add
            CKEDITOR.config.contentsCss = '/css/mycssfilename.css' ;