dhtmlxeditor:initializing_dhtmlxeditor [Skin test wiki]

Initializing dhtmlxEditor

The first steps that need to be taken for dhtmlxEditor's initialization are the following:

Download dhtmlxEditor and dhtmlxToolbar 2.0 packages from the server and place them in a folder;
Create an html file;
Place the full paths to dhtmlxEditor's CSS and JS files into the header of html file;
Place the full paths to dhtmlxToolbar's CSS and JS files into the header of html file.

  <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxeditor_dhx_blue.css">
  <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxtoolbar_dhx_blue.css">
  <script src="[full path to this file]/dhtmlxeditor.js"></script>
  <script src="[full path to this file]/dhtmlxcommon.js"></script>
  <script src="[full path to this file]/dhtmlxtoolbar.js"></script>

The user needs to create an object where dhtmlxEditor will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag.

  <div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;"></div>

The next step is to create a new dhtmlXEditor object and place it after the <div> element (object) that we've just created:

  var editor = new dhtmlXEditor(objId, skin);

objId defines an HTML object on page to which the editor is attached (the main editor container in the code mentioned above). Skin is the optional parameter which defines the skin that will be applied to the editor. If this argument is not set, the component will be created with the default skin (dhx_blue).

Then the method setIconsPath() should be used to set the full path to the directory, where editor image files are located. By means of this method the user is able to set path to the directory, where icons images are stored.

  editor.setIconsPath("[full path to this directory]/codebase/imgs/");

Icon images are grouped by skin name in the directories inside this imgs one. The user shouldn't indicate the directory for icons images for a certain skin inside imgs one in setIconsPath() method, as the system will do it itself.

And the last line of code for initialization is the following:

  editor.init();

So, in our case the initialization code for dhtmlxEditor will look like this:

  var editor = new dhtmlXEditor("editorObj");
  editor.setIconsPath("[full path to this directory]/codebase/imgs/");
  editor.init();