DHTMLX Docs & Samples Explorer

editor

dhtmlxEditor integration. Presents text editor.

Please note, to use editor item you must include several dhtmlxEditor related files:

1.If you use dhtmlxEditor standalone you need to include 3 files:

<script src="../codebase/dhtmlxeditor.js" type="text/javascript"></script>
<script src="../codebase/ext/dhtmlxform_item_dhxeditor.js"></script>
<link rel="stylesheet" type="text/css" href="../codebase/skins/dhtmlxeditor_dhx_skyblue.css">

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

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


Using dhtmlxEditor API

To use the dhtmlxEditor API for the item, get the editor object as in:

var dhxEditor = myForm.getEditor("myEditor");
...
dhxEditor.alignCenter();

Attributes

  • className - (string) the user-defined css class for item
  • disabled - (boolean) disables/enables the item
  • hidden - (boolean) hides/shows the item. The default value - false (the item is shown)
  • info - (boolean) adds the icon after the item label (related event - onInfo)
  • inputHeight - (integer or auto) sets the height of input. The default value is auto
  • inputLeft - (integer) the left absolute offset of input. Just position:“absolute” makes sense of the attribute
  • inputTop - (integer) the top absolute offset of input. Just position:“absolute” makes sense of the attribute
  • inputWidth - (integer or auto) sets the width of input. The default value is auto
  • label - (string) the text label of item
  • labelAlign - (left, right or center) the alignment of label within the defined width
  • labelHeight - (integer or auto) the height of label. The default value is auto
  • labelLeft - (integer) the left absolute offset of label. Just position:“absolute” makes sense of the attribute
  • labelTop - (integer) the top absolute offset of label. Just position:“absolute” makes sense of the attribute
  • labelWidth - (integer or auto) the width of label. The default value is auto
  • name - (string) the identification name. Used for referring to item
  • note - (object) creates the details block which is placed under the item
    • text - (string) the text of the block
    • width - (integer) the width of the block
  • offsetLeft - (integer) sets the left relative offset of item (both input and label)
  • offsetTop - (integer) sets the top relative offset of item (both input and label)
  • position - (label-left, label-right, label-top or absolute) defines the position of label relative to input
  • required - (boolean) adds the icon after the label marking the field as mandatory. Also, setting the attribute to true automatically assignes the 'NotEmpty' validation rule to the field
  • tooltip - (string) creates the tooltip for the item label
  • validate - (predefined rule or custom function) sets the validation rule. See details in the chapter 'Validation'
  • value - (string) the initial value of item
  • userdata - (object) sets some user data for the item (key:value pairs)
var formData = [{type: 'editor', name: 'Description', id:'Description', label: 'Description:', labelWidth:90 , labelLeft: -4, labelTop: 112, inputWidth: 300, inputLeft: 97, inputTop:110, position:'absolute',labelAlign:'right',inputHeight:124,value:"Hello,Editor!"}				
];