V3: Themes

[Frederico Caldeira Knabben]

The CKEditor prototype introduces the concept of "theme".

The theme is the object responsible for building the editor interface structure. Each editor instance has its theme name in the <instance>.config.theme setting. It must match a folder name in the "themes" folder.

A theme is defined in a file named "theme.js". The theme code must call the CKEDITOR.themes.add() function to register the "theme definition". The definition must define the "build" and "destroy" functions. See "_source/themes/default/theme.js" for an example.

The "build" function injects the editor interface in the page. It defines the HTML structure to be used by the interface, and one or more "theme spaces" to be filled by other plugins.

For example, the default theme defines a table with three rows. Each row contains a "theme space", named "top", "contents" and "bottom". The theme fires the "themeSpace" event in the editor instance, which can be listened by other plugins to fill the space with HTML.

Finally, the theme inserts the interface HTML in the proper place in the page, according to the <instance>.elementMode property (replace or append to element).

The theme code is also responsible to destroy the interface elements, with the "destroy" function.