Equation Editor API

Adds history, with undo and redo, to the TextArea. This requires a history menu to provide the necessary control

Connects an Output component to the current TextArea.

Connects a Toolbar component to the current Textarea.

NEW!

Provides a convienent method of executing any Output class function for all Ouput areas associated with the TextArea. This is particular useful when you have multiple output and you need them all to change.

For example, say you want to change the format for all the outputs:

<select id="format" onchange="textarea.callOutputs('setFormat', this.value);">
     <option value="svg">svg</option>
     <option value="gif">gif</option>
     <option value="png">png</option>
  <option value="pdf">pdf</option>
  <option value="emf">emf</option>
</select>

Clears the input box (TextArea)

Call if you are dynamically displaying the editor and select to 'close' a TextArea. This function will clean up any extra DOM elements.

Determines the current cursor position and saves a copy to public variable TextArea.caretPos.

Returns

The position of the cursor. 0 is the start

Returns the current TextArea object. Typically you will then want to retrieve the textContent to retrieve the LaTeX formula.

The following example illustrates how a button onclick action can retrieve the content of a TextArea.

<div id="input"></div>
<script>
textarea = new EqEditor.TextArea('input');
</script>
...
<button onclick="alert(textarea.getTextArea().textContent)" />

Insert commands into the active HTML element at the current cursor position. The following example insert text for a fraction and places the cursor between the first curly braces:

<div id="input"></div>
<script>
var a = EqEditor.TextArea.link('input', true);
a.insert('\frac{}{}', 6) 
</script>

Returns true if the current TextArea is empty, false otherwise.

Generates the LaTeX for an array with the specified dimensions and inserted this into the active TextArea.

Generates the LaTeX for a Matrix and inserts this into the active TextArea.

NEW!

Notifies all connected History Menus of changes.

NEW! Notifies all connected Outputs of changes.

Pushes any text from the current TextArea to the History stack. Which allows further changes to be undone.

Reverts an undone change.

Sets the current cursor position.

<div id="input"></div>
<script>
var ta = new EqEditor.TextArea('input', true);
</script>

NEW! Restricts keyboard input, with three current modes: 0 - allows all text an key operations 1 - allows delete and space key. Other inputs must come from the toolbar 2 - All inputs must come from the toolbar

NEW! Assigned allowable commands that can be used within the formula. Any variables breaking this conditions are assigned the class "CCrestricted" which by default causes them to be shown in red and underlined. Override the CSS for "CCrestricted" to achieve alternative effects.

NEW!

Assigned allowable variables that can be used within the formula. Any variables breaking this conditions are assigned the class "CCrestricted" which typically causes them to be red and undelined.

The follow example allows variable 'bill' and any that start with 'j' and also end with 's':

textarea = EqEditor.TextArea.link('latexInput',true)
          .addOutput(new EqEditor.Output('output'))
          .setRestrictedVariables(['bill','j\\w+s'])

Undoes the last action. Repeated called will unwind changes to the input area.

Changes the dimensions of an existing selected matrix

NEW! Check the equation to ensire it only contians permitted variables and functions. Return true or false accordingly.

Static constructor.

Returns a new instance of TextArea linked to the specified HTML element. The advantage of this over the use of constructor with 'new' is that it allows you chain additional requirments, as shown in the example:

<div id="input"></div>
<script>
EqEditor.TextArea.link('input', true)
.addToolbar(new EqEditor.Toolbar('toolbar'), true)
</script>

Connects the History buttons with the TextArea provided as parameter.

Connects an export area with the current Output and returns this Output Object.

Links Output to a TextArea so it will display the formatted equation for that text.

Downloads the current equation.

Interface function for exporting the equation, returning a text string in the appropriate type.

Returns the equation in a compact form, removing all redundant spaces.

Returns the equation as a text string.

Returns the supported export options.

Returns the current inline status.

Returns the supported output colours.

Returns the supported output DPI.

Returns the supported output font sizes.

Returns the supported output fonts.

Returns the supported output formats.

Sets the Background Color of the Output.

Sets the Dpi of the Output.

Sets the Format of the Output.

Sets the font of the Output. Current the rendering service supports: (default) - Latin Modern jvn - Verdana cmb - Computer Modern phv - Helvetica phn - Helvetica Neue tx - tx Sans Serif px - px Sans Serif cs - Comic Sans

Sets the font size of the Output.

Sets the graphical Format of the Output, but changing the url of the request to the equation rendering service. For example 'gif' uses 'http://latex.codecogs.com/gif.latex?', where as 'svg' uses 'http://latex.codecogs.com/svg.latex?'

Sets the Inline mode of the Output.

Sets the URL which will render the active equation. The default is to use 'https://latex.codecogs.com', and you would typically change this to use custom installation fo the rendering service.

Updates the Output to reflect new changes.

Static constructor. Returns a new instance of Output linked to the specified HTML element. This approach is useful for chaining various output requirements together, e.g.

<div id="entry"></div>
<img id="output"/>
<script>
EqEditor.TextArea.link('entry')
 .addOutput(EqEditor.Output.link('output', 'url')
 .setFont('phv')
 .setFontSize('LARGE') 
);
</script>

Connects a TextArea with the current Toolbar. For example:

<div id="editor"></div>
<div id="input"></div>
<script>
  EqEditor.Toolbar.link('editor', true)
    .addTextArea(mew EqEditor.TextArea('input'), true)
</script>

Returns the current Toolbar object.

NEW!

Appends a new panel to the end of an existing toolbar with a custom set of buttons.

The function accepts either a single string, that contains the name of a in build toolbar name (e.g. "matrix"). Alternatively you can provide a object with the following parameters:

• name {string} - A unique name for panel.
• class {string} - [optional] CSS Class to assign button.
• width {number} - Width of the panel in pixels.
• buttons {array} - List of Button objects (see below).

A button is defines with the following:

• latex {string} - The information to be displayed within the button. This can either be a Text or a single supported LaTeX string which will be displayed as a graphic.
• width {number} - Width of the button in pixels.
• operation {string} - Command to be executed, typically insert, but may be custom function.
• args [array] - Arguments to be passed to the 'operation' function, usually this will contain as the first parameter the LaTeX to be added to the textArea, but will depend on the function prototype.

By default all text buttons are assigned the class CCButton, while any with images are assigned a class CCImage.

Key examples:

EqEditor.Toolbar.link('toolbar','[["operators"]]')
   .addTextArea(textarea)
   .appendPanel(0,"matrix")
   .appendPanel(0,{
       "name":"textvariables",
       "width":40,
       "buttons":[
           {"latex":"bill"},
           {"latex":"jill"},
           {"latex":"jack"}
       ]
   })
   .appendPanel(0,{
       "name":"any_unique_name",
       "class":"green",
       "width":50,
       "buttons":[
           {
               "latex": "\\mp",
               "width": 35,
               "operation": "insert",
               "args": ["\\mp"],
           },
           {
               "latex": "alpha",
               "width": 35,
               "operation": "insert",
               "args": ["\\alpha"],
           }
       ]
   });

Returns the HTMLDivElement for a equation editor toolbar panel using its name. This is typically required when dynamically moving a panel from an inactive panel onto the main toolbar.

Moves the editor from one location to another. This is useful if you want to provide dynamic position of the toolbar with multiple inputs. For example:

<div id="editor1"></div>
<div id="input1" onClick="tb.moveTo('editor1')"></div>
<div id="editor2"></div>
<div id="input2" onClick="tb.moveTo('editor2')"></div>
<script>
  tb = EqEditor.Toolbar.link('editor1', true)
    .addTextArea(mew EqEditor.TextArea('input1'), true)
    .addTextArea(mew EqEditor.TextArea('input2'), true);
</script>

Returns

return itself in support of the chaining commands together.

Make the specified TextArea active, such that it recieves input from the toolbar and keyboard.

Returns

Returns this (the current Toolbar object) in support of chained commands.

A static constructor that places the Equation Edittor toolbar on the page and returns new Toolbar object. This is a convenient alternative to using 'new EqEditor.Toolbar' as it allows you to chain associsated Toolbar commands, e.g.

<div id="toolbar"></div>
<div id="input"></div>
<script>
   EqEditor.Toolbar.link('toolbar')
  .addTextArea(new EqEditor.TextArea('input'), true);
</script>

You can use a range of standard toolbars. Currently these include: 'full', 'mini', 'chemistry'. e.g.

  EqEditor.Toolbar('toolbar','chemistry');

Alternative you can select the panels required in any order, e.g.

  EqEditor.Toolbar('toolbar', '[["operators_core","greeklower","chemistry_arrows",
                                 "mhchem","mhchem_arrows","colors"]]');