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.


    CSS Howto..

    how to keep the aspect ratio of an image in bounding box - CSS

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to line up a css ::before pseudo element like a grid

    How to change this CSS code to get required layout

    How do I get this dropdown to be on top of the other elements

    How do you deal with the designing issues of a website?

    jQuery how to select children first level div's

    How to Fade In Background on Page Load - jQuery

    How to add a Delay on Bootstrap Dropdown Hover

    How put some horizontal offset to an element bottom border with CSS?

    How to use JavaScript to scale an image to fit

    My jquery slideshow is not functioning properly

    How to rotate a div

    CSS: how to make a span only as wide as its content

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    Showing :before but hiding element with CSS only

    CSS - how to overflow from div to full width of screen

    how do you link css to a jade file?

    How to add the very last border on the sub menu items

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    How to update current css version in asp.net

    How to stop the latter part of javascript from being called?

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    GWT how to add css style on Image Resource

    How to make css two borders?

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How do I evenly space these links within my navbar div?

    How to restore WordPress theme style,css from caches on internet