## Properties

Name | Type | Default
--- | --- | ---
createCommand | Function | null
Sets or gets the jqxEditor's createCommand property. The property allows you to add new commands or override existing commands.

#### Code examples

Set the `createCommand` property in order to create new commands.

    $('#editor').jqxEditor({
        height: 400,
        width: 800,
        tools: 'datetime | print clear | backcolor | font bold italic underline',
        createCommand: function (name) {
            switch (name) {
                case "datetime":
                    return {
                        type: 'list',
                        tooltip: "Insert Date/Time",
                        init: function (widget) {
                            widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 160, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
                        },
                        refresh: function (widget, style) {
                            // do something here when the selection is changed.
                            widget.jqxDropDownList('clearSelection');
                        },
                        action: function (widget, editor) {
                            var widgetValue = widget.val();
                            var date = new Date();
                            // return object with command and value members.
                            return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() };
                        }
                    }
                case "print":
                    return {
                        type: 'button',
                        tooltip: 'Print',
                        init: function (widget) {
                            widget.jqxButton({ height: 25, width: 40 });
                            widget.html("<span style='line-height: 23px;'>Print</span>");
                        },
                        refresh: function (widget, style) {
                            // do something here when the selection is changed.
                        },
                        action: function (widget, editor) {
                            // return nothing and perform a custom action.
                            $('#editor').jqxEditor('print');
                        }
                    }
                case "clear":
                    return {
                        type: 'button',
                        tooltip: 'Clear',
                        init: function (widget) {
                            widget.jqxButton({ height: 25, width: 40 });
                            widget.html("<span style='line-height: 23px;'>Clear</span>");
                        },
                        refresh: function (widget, style) {
                            // do something here when the selection is changed.
                        },
                        action: function (widget, editor) {
                            // return nothing and perform a custom action.
                            $('#editor').val('');
                        }
                    }
                case "backcolor":
                    return {
                        type: 'colorPicker',
                        tooltip: 'Background',
                        init: function (widget) {
                            widget.jqxDropDownButton({ width: 160 });
                            widget.jqxDropDownButton('setContent', '<span style="line-height: 23px;">Choose Background</span>');
                        },
                        refresh: function (widget, style) {
                            // do something here when the selection is changed.
                        },
                        action: function (widget, editor) {
                            // return nothing and perform a custom action.
                            var color = widget.val();
                            editor.css('background', color);
                        }
                    }
            }
        }
    });

Set the `createCommand` property to override existing commands.

    $('#editor').jqxEditor({
        height: 400,
        width: 800,
        tools: "bold italic underline | font size | left center right | outdent indent",
        createCommand: function (name) {
            switch (name) {
                case "font":
                    return {
                        init: function (widget) {
                            widget.jqxDropDownList({
                                source: [{ label: 'Arial', value: 'Arial, Helvetica, sans-serif' },
                                        { label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' },
                                        { label: 'Courier New', value: '"Courier New", Courier, monospace' },
                                        { label: 'Georgia', value: "Georgia,serif" }]
                            });
                        }
                    }
                case "size":
                    return {
                        init: function (widget) {
                            widget.jqxDropDownList({
                                source: [
                                    { label: "8pt", value: "xx-small" },
                                    { label: "12pt", value: "small" },
                                    { label: "18pt", value: "large" },
                                    { label: "36pt", value: "xx-large" }
                                ]
                            });
                        }
                    }
            }
        }
    });

Get the `createCommand` property.

    var createCommand = $('#jqxEditor').jqxEditor('createCommand');

Try it: createCommand is set to a custom function.
disabled | Boolean | false
Sets or gets whether the jqxEditor is disabled.

#### Code examples

Set the `disabled` property.

    $('#jqxEditor').jqxEditor({ disabled:true });

Get the `disabled` property.

    var disabled = $('#jqxEditor').jqxEditor('disabled');

Try it: disabled is set to true
editable | Boolean | true
Sets or gets the jqxEditor's editable property. The property determines whether the jqxEditor is read only.

#### Code examples

Set the `editable` property.

    $('#jqxEditor').jqxEditor({editable: true});

Get the `editable` property.

    var editable = $('#jqxEditor').jqxEditor('editable');

Try it: editable is set to false
height | Number/String | null
Sets or gets the jqxEditor's height.

#### Code examples

Set the `height` property.

    $('#jqxEditor').jqxEditor({height:"400px"});

Get the `height` property.

    var height = $('#jqxEditor').jqxEditor('height');

Try it: height is set to '400px'
lineBreak | String | "default"
Sets or gets the jqxEditor's line break. The property determines whether the jqxEditor creates `BR`, `P` or `DIV` tag when the `Enter` key is pressed or uses the web browser's default mode.

#### Code examples

Set the `lineBreak` property.

    $('#jqxEditor').jqxEditor({lineBreak:"div"});

Get the `lineBreak` property.

    var lineBreak = $('#jqxEditor').jqxEditor('lineBreak');

Try it: lineBreak is set to 'div'
localization | Object | { "bold": "Bold", "italic": "Italic", "underline": "Underline", "format": "Format Block", "font": "Font Name", "size": "Font Size", "color": "Text Color", "background": "Fill Color", "left": "Align Left", "center": "Align Center", "right": "Align Right", "outdent": "Indent Less", "indent": "Indent More", "ul": "Insert unordered list", "ol": "Insert ordered list", "image": "Insert image", "link": "Insert link", "html": "View source", "clean": "Remove Formatting" }
Sets or gets the jqxEditor's localization. The property determines the localization of the jqxEditor.

#### Code examples

Set the `localization` property.

    $('#editor').jqxEditor({
        localization: {
            "bold": "Fett",
            "italic": "Kursiv",
            "underline": "Unterstreichen",
            "format": "Block-Format",
            "font": "Schriftname",
            "size": "Schriftgröße",
            "color": "Textfarbe",
            "background": "Hintergrundfarbe",
            "left": "Links ausrichten",
            "center": "Mitte ausrichten",
            "right": "Rechts ausrichten",
            "outdent": "Weniger Einzug",
            "indent": "Mehr Einzug",
            "ul": "Legen Sie ungeordnete Liste",
            "ol": "Geordnete Liste einfügen",
            "image": "Bild einfügen",
            "link": "Link einfügen",
            "html": "html anzeigen",
            "clean": "Formatierung entfernen"
        }
    });

Get the `localization` property.

    var localization = $('#jqxEditor').jqxEditor('localization');

Try it: localization is set to a custom object.
pasteMode | String | "html"
Sets or gets the jqxEditor's paste mode. The property determines whether the clipboard data is pasted as HTML or Plain Text. Possible values: "html" and "text".

#### Code examples

Set the `pasteMode` property.

    $('#jqxEditor').jqxEditor({pasteMode:"html"});

Get the `pasteMode` property.

    var pasteMode = $('#jqxEditor').jqxEditor('pasteMode');

Try it: pasteMode is set to 'text'
rtl | Boolean | false
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code example

Set the `rtl` property.

    $('#jqxEditor').jqxEditor({rtl : true});

Get the `rtl` property.

    var rtl = $('#jqxEditor').jqxEditor('rtl');

Try it: rtl is set to true
stylesheets | Array | []
Sets or gets the jqxEditor's stylesheets. The property allows you to include stylesheets into the jqxEditor's IFrame.

#### Code examples

Set the `stylesheets` property.

    $('#jqxEditor').jqxEditor({stylesheets:["../../../../jqwidgets/styles/jqx.base.css"]);

Get the `stylesheets` property.

    var stylesheets = $('#jqxEditor').jqxEditor('stylesheets');

Try it: stylesheets is set to a custom array.
theme | String | ''
Sets the widget's theme. jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

- Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'energyblue'
toolbarPosition | String | "top"
Sets or gets the jqxEditor's toolbar position. The property determines the position of the jqxEditor's toolbar.

#### Code examples

Set the `toolbarPosition` property.

    $('#jqxEditor').jqxEditor({toolbarPosition:"bottom"});

Get the `toolbarPosition` property.

    var toolbarPosition = $('#jqxEditor').jqxEditor('toolbarPosition');

Try it: toolbarPosition is set to 'bottom'
tools | String | "bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html"
Sets or gets the jqxEditor's tools. The property determines the visibility and layout of the jqxEditor's tools.

#### Code examples

Set the `tools` property.

    $('#jqxEditor').jqxEditor({tools:"bold italic underline"});

Get the `tools` property.

    var tools = $('#jqxEditor').jqxEditor('tools');

Try it: tools is set to "bold italic underline"
width | Number/String | null
Sets or gets the jqxEditor's width.

#### Code examples

Set the `width` property.

    $('#jqxEditor').jqxEditor({width:"200px"});

Get the `width` property.

    var width = $('#jqxEditor').jqxEditor('width');

Try it: width is set to '800px'

## Events

change | Event |
This is triggered when the jqxEditor's value is changed.

#### Code examples

Bind to the `change` event by type: jqxEditor.

    $('#jqxEditor').on('change', function (event) {
        // type
        var type = event.args.type; // keyboard, mouse or null depending on how the value was changed.
    });

Try it: Bind to the change event by type:jqxEditor

## Methods

destroy | Method |
Destroys the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxEditor').jqxEditor('destroy');

Try it: destroys the jqxEditor
focus | Method |
Focuses the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `focus` method.

    $('#jqxEditor').jqxEditor('focus');

Try it: focuses the jqxEditor
print | Method |
Prints the jqxEditor's value.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `print` method.

    $('#jqxEditor').jqxEditor('print');

Try it: prints the jqxEditor's value.
setMode | Method |
Sets the jqxEditor's mode. The method has one boolean parameter which determines whether the jqxEditor displays its value as formatted html or html code.

Parameter | Type | Description
--- | --- | ---
mode | Boolean |

Return Value
None

#### Code examples

Invoke the `setMode` method.

    $('#jqxEditor').jqxEditor('setMode', true);

Try it: display the jqxEditor's html code.
val | Method |
Sets or gets the value.

Parameter | Type | Description
--- | --- | ---
htmlValue | String |

Return Value
String

#### Code example

Invoke the `val` method.

// Get the value.

    var value = $("#jqxEditor").jqxEditor('val');

// Get the value using jQuery's val()

    var value = $("#jqxEditor").val();

// Set value.

    $("#jqxEditor").jqxEditor('val', 'New Value');

// Set value using jQuery's val().

    $("#jqxEditor").val('New Value');

Try it: invoke the val method of the jqxEditor