jQuery Editor API

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

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'

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'

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) {  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

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

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code example