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>
<br /><br /><br /><br /><br />
<div  style='border: 2px; height: 50px;' id="editor"  contenteditable="true">edit field</div>
<button id='myButton1'>click</button>

JavaScript

$('#editor').jqxEditor({
    height: 400,
    width: 500,
    theme: 'energyblue',
   // tools: 'datetime ',
});

//var mySource = { 'itemOne' : 'ONE', 'itemTwo' : 'TWO', 'itemThree' : 'THREE' } ;

$('#myButton1').on('click', function(e) {
   $('#editor').jqxEditor('destroy');
  
  /*
    $('#editor').jqxEditor({
       height: 400,
    width: 500,
    theme: 'energyblue',
    tools: 'datetime ',
  
         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: mySource,
                            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: "inserttext",
                            value:   widget.val()
                            //value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear()
                        };
                    }
                }
                
        }  //end switch
      } // end createCommand
      
 
    })
      $(e.currentTarget).prev().show()     ;        // manually open toolbar
     ...