Problem with addCss()

Hi,
I use this code so when the user clicks on the "div"... It loads CKEditor... This works... The problem is that it does not apply the css:

is.addCss('body { margin:0 0 0 0.5px; padding:0; font-family:' + Page.getStyle('font-family') + '; font-size:' + Page.getStyle('font-size') + ';}');

Only the first time that it loads:

window.editor = loadCKE($$('.module-editBlock')[0]);

Here is the full code:

   function loadCKE(edit){
      
      var Page = $('page');
      
      var is = CKEDITOR.replace(edit,
      {
         sharedSpaces :
            {
               top : 'controls-bar'
            },
         
         docType: '<!DOCTYPE HTML>',
         resize_enabled : false,
         startupFocus : true,
         toolbarCanCollapse : false,
         toolbar : [
                  ['Save'],
                  ['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'],
                  '/',
                  ['Styles','Format','Font','FontSize'],
                  ['TextColor','BGColor'],
                  ['ShowBlocks'],
                  ['Link','Unlink','Anchor'],
                  ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak']
               ]
         })
         
         is.addCss('body { margin:0 0 0 0.5px; padding:0; font-family:' + Page.getStyle('font-family') + '; font-size:' + Page.getStyle('font-size') + ';}');
      
      return is;
      
   }
   
   window.editor = loadCKE($$('.module-editBlock')[0]);
   
   $$('.module-editBlock').addEvent('click', function(el){
         window.editor.destroy();
         window.editor = loadCKE(this);
      });

Thanks in advance for any help.

Sun, 08/08/2010 - 07:12

jnbdz

Joined: 03/08/2010

Posts: 10

Re: Problem with addCss()

Here is something else I tried:

CKEDITOR.on( 'instanceReady', function( e ){      
      var Page = $('page');
      e.editor.addCss('body {margin:0 0 0 0.5px; padding:0; font-family:' + Page.getStyle('font-family') + '; font-size:' + Page.getStyle('font-size') + ';}');
   });

The CSS is still no apply... I don't know why... Too me it does not make any sense.

Sun, 08/08/2010 - 07:41

jnbdz

Joined: 03/08/2010

Posts: 10

Re: Problem with addCss()

I tried it in divreplace.html the demo and it does the same thing... Same problem... I really don't understand the bug...

Here is the code:

var editor;

function replaceDiv( div )
{
   if ( editor )
      editor.destroy();

   editor = CKEDITOR.replace( div );
   
   editor.addCss('body {margin:0 0 0 0.5px; padding:0; font-family:Arial,Helvetica,sans-serif; font-size:14.4px;}');
}

Mon, 08/09/2010 - 10:31

comp615

Joined: 02/07/2010

Posts: 295

Re: Problem with addCss()

viewtopic.php?f=11&t=15672

Sat, 08/14/2010 - 20:39

jnbdz

Joined: 03/08/2010

Posts: 10

Re: Problem with addCss()

Perfect, thanks it works.

Here is the solution:

CKEDITOR.on( 'instanceCreated', function( e ){
      
      e.editor.addCss(CSS);
      
   });