Check documentation for the latest version of dhtmlxSuite Skinning the Editor DHTMLX Docs

Skinning the Editor

The library provides 4 predefined skins:

To set the skin for a dhtmlxEditor object, use the "skin" parameter of the editor's constructor (or the setSkin method):

Setting the skin for the editor

var myEditor = new dhtmlXEditor({
    parent: "editorObj",
myEditor = new dhtmlXEditor("editorObj");

Related sample:  Skins


This is the default skin.

File to include: skins/dhtmlxeditor_material.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_material.css"/>


File to include: skins/dhtmlxeditor_dhx_skyblue.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_skyblue.css"/>


File to include: skins/dhtmlxeditor_dhx_web.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_web.css"/>


File to include: skins/dhtmlxeditor_dhx_terrace.css

<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxeditor_dhx_terrace.css"/>

Related sample:  Skins

Skin Detection

The following priority (from higher to lower) is used to determine the skin to apply:

  1. The skin parameter of the dhtmxlEditor object constructor
  2. The property
  3. The form's skin (if the editor is presented as a form's control)
  4. dhtmlxEditor tries to detect the skin automatically (each skin css file has a corresponding record to help to detect the skin)
  5. The default "material" skin is used

For example, if you include on the page the only css file "dhxeditor_dhx_terrace" and instantiate dhtmlxEditor without specifying the skin parameter, then the "dhx_terrace" skin will be detected automatically.

Back to top