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 contenteditable = true id="editor">my stuff</div>

CSS

div.phoneticSymbol {
  float        : left  ;
  margin-left  : 2px  ;
  margin-right : 4px   ;
  min-width    : 16px ;
  max-width: 16px;
  width: 16px;
}
div#editor {
  border: 1px solid black;
  margin-left: 350px;
  height: 100px;
  margin-top: 100px;
  width: 600px;
}

JavaScript

const FIRST             =       'ð'             ;

const OMISSION          =       '\u00d8'        ;       //      'ø'
const BACKSPACE         =       '\u00e6'        ;       //      æ

const UNSTRESSED_ER     =       '\u025a'        ;
const STRESSED_SCHWA    =       '\u028c'        ;
const STRESSED_ER       =       '\u025d'        ;

const SCHWA             =       '\u01dd'        ;

const DEADHEAD          =       '\u025b'        ;
const SLUSH             =       '\u0283'        ;
const VOICED_TH         =       '\u00f0'        ;

const N_G               =       '\u014b'        ;
const THETA             =       '\u03b8'        ;

const SOFT_U            =       '\u028a'        ;
const SHORT_I           =       '\u026a'        ;


let phoneticSymbolArray = 
[	[OMISSION , BACKSPACE , UNSTRESSED_ER , STRESSED_SCHWA , STRESSED_ER ]
, [SCHWA    , DEADHEAD  , SLUSH         , VOICED_TH     , N_G          ]
, [THETA    , SOFT_U    , SHORT_I                                      ]
];
//debugger;

let sourceArray = [];

for ( let x=0; x < phoneticSymbolArray.length; x++ ) {
    let tmp = '';
    for ( let y=0; y < phoneticSymbolArray[x].length; y++ ) {
      tmp += "<div class='phoneticSymbol'>" + phoneticSymbolArray[x][y] + "</div>";
    }
    sourceArray[x] = tmp;
}

$('#editor').jqxEditor({
    height: 400,
    width: 500,
    theme: 'energyblue',
    tools: '| bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html | phonetic ',
    createCommand: function (name) {
        switch (name) {
            case "phonetic":
                return {
                    type: 'list',
                    tooltip: "Insert Phonetic Symbol",
                    init: function (widget) {
                        widget.jqxDropDownList({
                            placeHolder: "Phonetic",
                            width: 120,
                            source :  sourceArray,
                           ...