How to add CSS on the fly?

Hi Peter; Did you get anywhere with this? cheers .. Jason

Hi Peter

The approach I took was to make a URL on the server which generates the CSS dynamically.
The HTML page which loads the editor is also generated dynamically, and so it can do something like:

CKEDITOR.config.contentsCss = '/myurl/<xsl:value-of select="$docID"/>.css';

to point to the dynamically generated css. Works nicely.

The other approach I briefly considered was altering wysiwygarea/plugin.js, where it says

 '<link href="' + editor.config.contentsCss + '" type="text/css" rel="stylesheet" _fcktemp="true"/>' 

but obviously this involves changing the editor source code.

cheers .. Jason

Hi all, I hope the following codes could help you:

var editor =  CKEDITOR.replace( 'editor' );
// Add dynamic css text to be used by the editing area.
editor.addCss( 'body { background-color: grey; }'  );      

garry.yao wrote:

var editor =  CKEDITOR.replace( 'editor' );
// Add dynamic css text to be used by the editing area.
editor.addCss( 'body { background-color: grey; }'  );      

Hi Gary,

I tried this in instanceReady, with the css I had previously been fetching using CKEDITOR.config.contentsCss, but it didn't affect how the contents were styled.

Any ideas?

thanks

Jason

Hi, it should be noticed that this config should be specified before the editor loaded, usage are exactly the same way in my previous code post.

the addCss method doesn't seem to be working after the first replace call for me. I have a page designed after the "divreplace" sample. My on replaceDiv function looks like this:

function ckeReplaceDiv( divid )
{
   if (editor){
      editor.destroy();
   }
   editor = CKEDITOR.replace(divid);
   editor.config.resize_minWidth = 70;
   editor.addCss(Pagecss);
}

Pagecss is created before this step. This works perfectly the first time the replacement happens. Subsequent ones don't work. The divs get replaced to editors, but the editor doesn't have the Pagecss. Any ideas?

garry.yao wrote:Hi, it should be noticed that this config should be specified before the editor loaded, usage are exactly the same way in my previous code post.

Can you post on how to do this? I've been looking for months now. Not sure how you call a function from an instance before the instance exists.

CKEDITOR.on( 'instanceCreated', function( e ){
    e.editor.addCss('css string to add');
});

Found out how to do it finally.

Hello all,

we had the same problem, until we figured out, that our PHP script should send the proper Content-type. Just add this into your PHP, before any output:

<?php header('Content-type: text/css'); ?>

Thanks,
Martin