CKEditor 4: How to add CSS stylesheet from plugin?

Tags: javascript,css,ckeditor

Problem :

Tried this for now, but no luck

  editor.addCss(this.path + 'tabber.css');
  editor.document.appendStyleSheet(this.path + 'tabber.css');

Full code

(function () {
  CKEDITOR.plugins.add('tabber', {
    init: function (editor) {
      editor.ui.addButton('addTab', {
        command: 'addTab',
        icon: this.path + 'icons/tabber.png',
        label: Drupal.t('Insert tabs')
      });
      editor.addCss(this.path + 'tabber.css');
      editor.document.appendStyleSheet(this.path + 'tabber.css');
      editor.addCommand('addTab', {
        exec: function (editor) {
          editor.insertHtml('<dl>' +
            '<dt>Tab title 1</dt>' +
            '<dd><p>Tab content 1.</p></dd>' +
            '<dt>Tab title 2</dt>' +
            '<dd><p>Tab content 2.</p></dd>' +
            '</dl>');
        }
      });
    }
  });
})();

Solution (thanks for the answer for pointing the right way) inside init

  var cssPath = this.path + 'tabber.css';
  editor.on('instanceReady', function () {
    this.document.appendStyleSheet(cssPath);
  });

---

Solution :

CKEDITOR.addCss accepts string as a parameter, so there's no way to pass any path there. CKEDITOR.document.appendStyleSheet is correct though (fiddle):

CKEDITOR.replace( 'editor', {
    on: {
        instanceReady: function() {
            this.document.appendStyleSheet( 'http://path.to.your.css' );
        }
    }
} );

Just make sure that:

1. Your CSS exists.
2. It has correct permissions to be read.
3. Your HTML is allowed in the editor (also read the integration guide as since 4.1 you need to adjust allowedContent for your command).

I guess you may also find CKEDITOR.getUrl useful.