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>
<center>
   <textarea id="editor"></textarea>
</center>

<div id="jqxPopover">
  <center>
   <div class='ipGrid' id="jqxPopover">
    <div class='ipSymbol'>θ</div>
    <div class='ipSymbol'>ʃ</div>
    <div class='ipSymbol'>t</div>
    <div class='ipSymbol'>ʊ</div>
    <div class='ipSymbol'>ʌ</div>
    <div class='ipSymbol'>ʒ</div>
    <div class='ipSymbol'>ʊ</div>
    <div class='ipSymbol'>ʔ</div>
    <div class='ipSymbol'>ᵊ</div>
    <div class='ipSymbol'>ʳ</div>
    <div class='ipSymbol'>→</div>
    <div class='ipSymbol'>ᵗ</div>
    <div class='ipSymbol'>æ</div>
    <div class='ipSymbol'>ɑ</div>
    <div class='ipSymbol'>ð</div>
    <div class='ipSymbol'>ɚ</div>
    <div class='ipSymbol'>ə</div>
    <div class='ipSymbol'>ɛ</div>
   </div>
  </center>
</div>

CSS

.ipGrid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2196F3;
  padding: 2px;
}

.ipSymbol {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 2px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

JavaScript

$('#editor').jqxEditor({
    height: 400,
    width: 500,
    theme: 'energyblue',
   // tools: 'datetime | print | clear',
    tools: 'datetime | backcolor | font | bold italic underline',
    createCommand: function (name) {
        switch (name) {
                 case "datetime":
                return {
                    type: 'button',
                    tooltip: 'Popover',
                    init: function (widget) {
                        widget.jqxButton({
                            height: 25,
                            width: 80
                        });
                        widget.html("<span id='button' style='line-height: 23px;'>Popover</span>");
                    },
                    refresh: function (widget, style) {
                        //alert ('refresh function')
                        // do something here when the selection is changed.
                    },
                    action: function (widget, editor) {
                        // return nothing and perform a custom action.
                        // $('#editor').jqxEditor('print');
                        //alert('action function')
                        var button = document.getElementById('button');
                        button.classList.add('hidden');
                    }
                }
        }
    }
});

$('#jqxPopover').jqxPopover({
     width: 200,
     height: 160,
     showArrow: true,
     showCloseButton: true,
     position: 'bottom',
     selector: $("#button"),
     title: 'Title'
});
$('.ipSymbol').on('click', (e) => {
      //alert (e.currentTarget.innerText);
      insertText(e.currentTarget.innerText);
      $('#jqxPopover').jqxPopover('close'); 
})

var lastFocused;
$("textarea#editor").focus(function() {
  console.log('AAAAAAAAAAAAAAAAAAA')
  lastFocused = document.activeElement;
});

//http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery
function insertText(text) {
   debugger;
  var...