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>
   <div id="editor">
     this is a test
   </div>
</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: 200,
    width: 500,
    theme: 'energyblue',
   // tools: 'datetime | print | clear',
    tools: 'popover | backcolor | font | bold italic underline',
    createCommand: function (name) {
        switch (name) {
                 case "popover":
                return {
                    type: 'button',
                    tooltip: 'Popover',
                    init: function (widget) {
                        widget.jqxButton({
                            height: 25,
                            width: 80
                        });
                        widget.html("<div id='button' style='line-height: 23px;'>Popover</div>");
                    },
                    refresh: function (widget, style) { },
                    action: function (widget, editor) { }
                }
        }
    }
});

$('#jqxPopover').jqxPopover({
     width: 200,
     height: 160,
     showArrow: true,
     showCloseButton: true,
     position: 'bottom',
     selector: $("#button"),
     title: 'Title'
});
$('.ipSymbol').on('click', (e) => {
      var item = e.currentTarget.innerText;
      var value =  $('#editor').val();
      
      //$('#editor').val(value + item); 
      //$('#editor').val( pasteHtmlAtCaret(item)); 
      
      $('#jqxPopover').jqxPopover('close');
            
      document.getElementById('editor').focus();
      $( "#editor" ).focus();
      pasteHtmlAtCaret( item ) ;
 
})

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        document.getElementById('editor').focus();
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
           ...