CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.skin

class singleton
See source

Manages the loading of skin parts among all editor instances.

Filtering

Properties

  • icons : Object

    See source

    The list of registered icons. To add new icons to this list, use addIcon.

    Defaults to {}

  • name : String

    See source

    The name of the skin that is currently used.

  • ua : Object

    See source

    The list of file names matching the browser user agent string from CKEDITOR.env. This is used to load the skin part file in addition to the "main" skin file for a particular browser.

    Note: For each of the defined skin parts the corresponding CSS file with the same name as the user agent must exist inside the skin directory.type?

  • ua_dialog : String

    See source

    Similar to ua_editor but used for dialog stylesheets.

    CKEDITOR.skin.ua_dialog = 'ie,iequirks,ie8,gecko';

  • ua_editor : String

    See source

    To help implement browser-specific "hacks" to the skin files and make it easy to maintain, it is possible to have dedicated files for such browsers. The browser files must be named after the main file names, appended by an underscore and the browser name (e.g. editor_ie.css, editor_ie8.css). The accepted browser names must match the CKEDITOR.env properties. You can find more information about browser "hacks" in the Dedicated Browser Hacks guide.

    CKEDITOR.skin.ua_editor = 'ie,iequirks,ie8,gecko';

Methods

  • addIcon( name, path, [ offset ], [ bgsize ] )

    See source

    Registers an icon.

    Parameters

    name : String

    The icon name.

    path : String

    The path to the icon image file.

    [ offset ] : Number

    The vertical offset position of the icon, if available inside a strip image.

    [ bgsize ] : String

    The value of the CSS "background-size" property to use for this icon

  • chameleon( editor, part )

    See source

    A function that supports the chameleon (skin color switch) feature, providing the skin color style updates to be applied in runtime.

    Note: The embedded $color variable is to be substituted with a specific UI color.

    Parameters

    editor : String

    The editor instance that the color changes apply to.

    part : String

    The name of the skin part where the color changes take place.

  • getIconStyle( name, [ rtl ], [ overridePath ], [ overrideOffset ], [ overrideBgsize ] )

    See source

    Gets the CSS background styles to be used to render a specific icon.

    Parameters

    name : String

    The icon name, as registered with addIcon.

    [ rtl ] : Boolean

    Indicates that the RTL version of the icon is to be used, if available.

    [ overridePath ] : String

    The path to the icon image file. It overrides the path defined by the named icon, if available, and is used if the named icon was not registered.

    [ overrideOffset ] : Number

    The vertical offset position of the icon. It overrides the offset defined by the named icon, if available, and is used if the named icon was not registered.

    [ overrideBgsize ] : String

    The value of the CSS "background-size" property to use for the icon. It overrides the value defined by the named icon, if available, and is used if the named icon was not registered.

  • getPath( part )

    See source

    Retrieves the real URL of a (CSS) skin part.

    Parameters

    part : String

  • loadPart( part, fn )

    See source

    Loads a skin part into the page. Does nothing if the part has already been loaded.

    Note: The "editor" part is always auto loaded upon instance creation, thus this function is mainly used to lazy load other parts of the skin that do not have to be displayed until requested.

    // Load the dialog part.
editor.skin.loadPart( 'dialog' );

    Parameters

    part : String

    The name of the skin part CSS file that resides in the skin directory.

    fn : Function

    The provided callback function which is invoked after the part is loaded.

  • path()

    See source

    Returns the root path to the skin directory.