CKEditor widget: how do I attach css in onLoad

Question

I'm writing a CKEditor widget. As I am trying to make it easily distributable, I want to make my css external. While this syntax works:

CKEDITOR.plugins.add('myplugin', {
    requires: 'widget',
    icons: 'myplugin',
    init: function(editor) {
        CKEDITOR.dialog.add('myplugin', this.path + 'dialogs/myplugin.js');
        var self = this;
        editor.on('contentDom', function() {
            editor.document.appendStyleSheet(CKEDITOR.getUrl(self.path + 'css/style.css'));
        });
    }
});

I found that CKSource uses onLoad: function(editor){} in their image2 widget to attach css. This looks more canonical than my code. I'm getting editor = undefined though. What's the catch?

Update:

I'm using the framed option and I definitely want to stay DRY through .appendStyleSheet() to user-facing page as well as to the wysiwyg framed editor. However, I still have problem with init/beforeInit:function(editor), where editor does not seem to have document property populated at that very moment. When I do window.ed = editor though, then I can access the window.ed.document in the console once the page is ready. So, is there any kind of deferred promise going on there? Maybe I'm complicating things, but I definitely want to append a distributable stylesheet and remove it easily.

I found this working:

    beforeInit: function(
        var ccss = CKEDITOR.config.contentsCss;
        if(typeof ccss == 'string'){
            ccss = [ccss];
        }
        ccss.push('/css/style.css'); // <-- my css installed at website root

        CKEDITOR.config.contentsCss = ccss;
        console.log(CKEDITOR.config.contentsCss);
    },

While the issue with isolated css stylesheet might sound over-complicated, I want to achieve an easily demoable state without the need to touch existing files.

Answer 1

Note that in the image2 plugin stylesheet is not added to editor instance, but using CKEDITOR.addCss :

CKEDITOR.plugins.add( 'image2', {
    ...
    onLoad: function( editor ) {
        CKEDITOR.addCss( ' ... ' );
    }
} );

It is a mistake that the editor is specified as an argument - it always will be null.

If you want to add stylesheet manually using document.appendStyleSheet , then do it on init , or beforeInit , not on onLoad .

Altough, you should know that contentDom will be fired multiple times for one document, eg when setting data. So in your case stylesheet would be added many times. Therefore, if you want to add a stylesheet for the framed editor (the one using iframe ), you can use config.contentsCss , and if you want to add it for inline editor, then you can freely call:

CKEDITOR.document.appendStyleSheet( ... );

In plugin's onLoad (will be called only once). So most likely you'll want to do both things, to handle inline and framed editors.