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');

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');

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');

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');

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');

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');

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');

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'); 

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');

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.

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');

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');

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');

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) {  var type = event.args.type; // keyboard, mouse or null depending on how the value was changed. }); 

Destroys the widget.

Code examples

Invoke the destroy method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Prints the jqxEditor's value.

Code examples

Invoke the print method.

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

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.

Code examples

Invoke the setMode method.

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

Sets or gets the value.

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');