Opened 15 years ago

Closed 15 years ago

#2459 closed New Feature (fixed)

V3: Skins

Reported by: Frederico Caldeira Knabben Owned by: Frederico Caldeira Knabben
Priority: Normal Milestone: CKEditor 3.0
Component: General Version:
Keywords: Confirmed V3ProtoCore Review+ Cc:


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>".


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> 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.

Change History (3)

comment:1 Changed 15 years ago by Frederico Caldeira Knabben

Keywords: Review? added
Owner: set to Frederico Caldeira Knabben
Status: newassigned

comment:2 Changed 15 years ago by Martin Kou

Keywords: Review+ added; Review? removed

comment:3 Changed 15 years ago by Frederico Caldeira Knabben

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy