Target readers are users (developers).
This component is a simple text editor that can be used in web pages.
It contains functionality that is often used in desktop editors. So if you've ever used MS Word or Open Office, you wouldn't have any trouble using dhtmlxEditor for writing texts and formatting them in the Web.
By clicking any button the user executes the function this button is responsible for. When the user hovers the mouse over the button, it becomes highlighted and the button's tooltip appears providing the information about the button function.
- bold, italic, underlined or
strikethroughformatting is applied to the text.
Note: If the user applies any of these options to the selected text, the toolbar button will be highlighted. In case the formatting needs to be removed, the user should press the highlighted button again. Any of the options can be applied to the text individually or in any combination with other options.
The user can set the text relative to the editing area which is called text alignment.There are four types of alignment available in dhtmlxEditor:
ButtonsThe selected text can be arranged in the following types of lists:are used to set the text alignment (left, centered, right, or justified)
The user can easily increase or decrease the text indent:![]()
- these buttons create numbered or bulleted lists
dhtmlxEditor provides a number of functions that allow users to manipulate the following font settings in the editing area:![]()
- these buttons increase or decrease the text indent
- these buttons superscript or subscript the text
![]()
![]()
![]()
- these buttons set the text as headings of different levels (h1 is the highest-level one)
<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxeditor_dhx_blue.css">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.
<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>
<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).
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.
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();
The following predefined skins are available for dhtmlxEditor users:
applyBold();To set selected text alignment, the following functions are used:
applyItalic();
applyUnderscore();
applyStrikethrough();
alignLeft();
alignRight();
alignCenter();
alignJustify();
Use these two methods to superscript or subscript the selected text:
applySub();
applySuper();
The lists can be created and the text indent can be increased or decreased like this:
createNumList();
createBulList();
increaseIndent();
decreaseIndent();
The following methods are used with the selected text block to set the heading:
There is the method that gets html content of the editor document:applyH1();
applyH2();
applyH3();
applyH4();
getContent();The following method sets the content to the editor document, passing the parameter htmlString - a html string that should be set as the editor content:
setContent(htmlString)There is also the possibility to set the content from an html document to the editor document, passing the parameter url - the path to the html page:
setContentHTML(url);