How to Start with dhtmlxEditor

In this article you will know how to create a simple text editor on the page.

Step 1. A new HTML file and related source files

To start, create a new HTML file and include the required source files in it.

If you use dhtmlxEditor standalone you need to include 2 files:

dhtmlxeditor.css
dhtmlxeditor.js

<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxeditor.css">     <script src="codebase/dhtmlxeditor.js"></script></head>
<body>
    <script>    //your code here
    </script>
</body>
</html>

If you use dhtmlxEditor as a part of "dhtmlxSuite" package you need to include 2 files:

dhtmlx.js
dhtmlx.css

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Step 2. An HTML container

Create a HTML container on the page (where later you will put in an editor):

<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <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>   //your code here
 </script>
</body>
</html>

Step 3. Object constructor

Create a new dhtmlXEditor's object in the HTML container:

<!DOCTYPE html>
<html>
<head>
    <title>Quick start with dhtmlxEditor</title>
    <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");
 </script>
</body>
</html>

You can also initialize dhtmlxEditor using the object notation.

Step 4. Set initial content

Call the setContent method to set the initial text in the editor.

Note, you can use any HTML while setting the text.

var myEditor = new dhtmlXEditor("editorObj");
myEditor.setContent("Please, type your comments here");

Related sample: Simple init