JavaScript Editor

Set the createCommand property of the jqxEditor. Author: http://jqwidgets.com

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div editable=true id="editor">tester</div>

JavaScript

$('#editor').jqxEditor({
    height: 400,
    width: 500,
    theme: 'energyblue',
    tools: 'datetime | print | clear',
    createCommand: function (name) {
        switch (name) {
            case "datetime":
                return {
                    type: 'list',
                    tooltip: "Insert Date/Time",
                    init: function (widget) {
                        widget.jqxDropDownList({
                            placeHolder: "Insert Custom HTML",
                            width: 170,
                            source: ['Insert Time', 'Insert Date',2,3,4,5,5,6,7,8,9,0],
                            dropDownVerticalAlignment:'top',
                            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>");
                    },
             ...