Report an issue
Class

CKEDITOR.skin

class singleton

Manages the loading of skin parts among all editor instances.

Filtering

Properties

  • icons : Object

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

    Defaults to {}

  • name : String

    The name of the skin that is currently used.

  • ua : Object

    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

    Similar to ua_editor but used for dialog stylesheets.

    CKEDITOR.skin.ua_dialog = 'ie,iequirks,ie8,gecko';
    
  • ua_editor : String

    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 ] )

    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 )

    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 ] )

    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 )

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

    Parameters

    part : String
  • loadPart( part, fn )

    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()

    Returns the root path to the skin directory.