Creating a Text Editor on the Page

A basic editor

A basic editor contains just the editing area where the user can type a text.

Files to include

dhtmlxeditor.css
dhtmlxeditor.js

Initialization code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <script src="codebase/dhtmlxeditor.js"></script>
</head>
<body>
    <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
    <script>
        var myEditor = new dhtmlXEditor("editorObj");
        myEditor.setContent("Type some text here");
 
    //myEditor = new dhtmlXEditor({parent: "editorObj",content: "Type some text here"});
    </script>
</body>
</html>

Related sample: Simple init

Related sample: Object API init

An editor with toolbar

Such an editor consists of 2 parts:

Toolbar - the top part of the editor that contains controls for text formatting.
Editing area- the below area where the user types text in.

Files to include

To have a text editor with the toolbar, you need to include source files of both dhtmlxEditor and dhtmlxToolbar components at once.

dhtmlxEditor source files are:

dhtmlxeditor.css
dhtmlxeditor.js

dhtmlxToolbar source files are:

dhtmlxtoolbar.css
dhtmlxtoolbar.js

Initialization code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtoolbar.css">
    <script src="codebase/dhtmlxeditor.js"></script>
    <script src="codebase/dhtmlxtoolbar.js"></script>
</head>
<body>
    <div id="editorObj" style="width:100%; height:300px; border:#909090 1px solid;"></div>
    <script>        var myEditor = new dhtmlXEditor({
            parent: "editorObj",
            toolbar: true, //adds the toolbar
            iconsPath: "codebase/imgs/",   //path to toolbar's icons
            content: "Type some text here"
        });
    </script>
</body>
</html>

Related sample: Init with toolbar

The iconsPath parameter sets the path to the toolbar's icons.
By default, icons are stored in the imgs folder of the package and grouped by skins (you don't need to indicate the skin in the path, as the component automatically detects it).

To use custom icons, specify the path to the custom icons as the parameter.