New widget plugin specific css, where to put it?

I am creating a widget plugin, following the tutorial on http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_2

Now I want to add some styling to my widget. The tutorial states: "The following are all styles needed by the widget that should be added to your contents.css contents.css file". I don't understand (or agree to) this advice. What if someone else wants to use my plugin? He cannot use my contents.css file, because I might have other plugins than him/her.

So, how can I add plugin-specific css, which lives inside my plugin folders, which I easily can ship to other locations?

Wed, 03/19/2014 - 12:26

reinmar

Joined: 24/08/2012

Posts: 631

You're totally right. The

You're totally right. The advice about adding widget styles to the global contents.css is a simplification for the tutorial. For a widget that will be reusable by others you need to put its styles in that plugin directory.

For example you can check how it is done in this ticket: mediaembed. There's styles/ directory in the plugin folder with the proposed stylesheets for the content generated by this plugin.

Now, how's the stylesheet used? There are 3 cases:

Classic (framed) editor - plugin adds path to stylesheet to the config.contentsCss, so it's automatically loaded by the editor.
Inline editor - editor cannot automatically load the stylesheet, because it's not responsible for the page's styling. It's an inline editor, so it inherits styles defined for the page by the developer. In this case the developer integrating CKEditor has to load this stylesheet by simply adding it to the page's <head> section.
Final page where content is loaded - the same as above - editor cannot do that, developer has to do that.

Therefore, your plugin needs to have a documentation saying that in order to use it, a developer needs to add a stylesheet which he can find in plugin's directory to the page's <head>.

We'll see how we can clarify this fact in the documentation.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Wed, 03/19/2014 - 13:39

koosvdkolk

Joined: 19/03/2014

Posts: 3

Thank you very much!

So if I understand correctly, I should do 3 things.

1. Add to my plugin init function something like this:

if (typeof CKEDITOR.config.contentsCss === 'string') {
  CKEDITOR.config.contentsCss = [CKEDITOR.config.contentsCss];
}
CKEDITOR.config.contentsCss.push(CKEDITOR.basePath + CKEDITOR.plugins.basePath + 'myplugin/plugin.css');

(I could not find a function to add a css file?)

2. Add to the documentation that the developer should add 'myplugin/plugin.css' to the editor HTML page if s/he wants to use an inline editor.

3. Add to documentation to add 'myplugin/plugin.css' to the end-user HTML page.

Wed, 03/19/2014 - 13:43