V3: Skins

[Frederico Caldeira Knabben]

In the CKEditor prototype, an editor skin is simply a set of CSS files which are loaded in the executing page. The "_source/skins/default" folder contains an example.

The main skin file is named "editor.css". This file contains the CSS definitions for the editor interface. We may also have "dialog.css", containing dialog specific definitions.

In the trunk/development version, editor.css contains a series of @import declarations. This makes the development code better organized. The release instead will have just one file, containing the minified version of all files.

Class names

Considering that all CSS definitions will be now loaded in the main page where the editor runs, we need ways to isolate them from other styles used in the page. Because of this, all classes used in the editor interface must be prefixed with "cke_".

We must also consider that we may have two editor instances using different skins in the same page. For that, the entire editor interface is defined inside a container element which has the "cke_skin_<skinName>" class. Therefore, all CSS definitions for a skin must go under ".cke_skin_<skinName>".

Reset

To be safe with the styles defined in the page, all skins must define a "CSS reset" set of styles, which clears those CSS properties that could interfere in the editor interface. For an example, see "skins/default/reset.css".

Instance configuration

The <instance>.config.skin setting contains the name of the skin to be used for a specific editor instance. The skin name must match the folder name in the "skins" folder. The skin files are downloaded only once, and shared among all instances using that same skin.