CKEditor 4: How to add a CSS stylesheet from a plugin?

Question

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, indicating the correct path) inside init

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

Answer 1

CKEDITOR.addCss takes a string as a parameter, so there is no way to pass any path there. CKEDITOR.document.appendStyleSheet true ( fiddle ):

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

Just make sure:

• Your CSS exists.
• It has the correct read permissions.
• Your HTML is allowed in the editor (also read the integration guide starting with 4.1, you need to configure allowedContent for your team).

I think you can also find CKEDITOR.getUrl useful.

Answer 2

Add the following to config.js :

config.contentsCss = [CKEDITOR.getUrl ('contents.css'), '/ path / to / your / css'];

This will add your CSS file to the default CKEditor styles. The advantage of this method over the Ready instance is that (at least for me), when the user switched modes from Source to Visual, the instanceReady event will not be restarted, and user styles will not be reapplied.

Answer 3

If you are using CKEditor 4.4 or later, you can use

editor.addContentsCss( pluginDirectory + 'styles/example.css' );

If you are using CKEditor with an older version, such as 4.3, you should use:

 beforeInit: function(editor) { var ccss = CKEDITOR.config.contentsCss; if(typeof ccss == 'string'){ ccss = [ccss]; } ccss.push('/css/style.css'); CKEDITOR.config.contentsCss = ccss; } 

Take a look at this ticket when this feature was created: https://dev.ckeditor.com/ticket/11532