:: Table of Contents

Usage

Plugins

LaTeX IT CK Editor v5 Tiny MCE v6 Blogger Angular Developer Guide

Equation Editor API

The Equation Editor API (Application Programming Interface) provides a mechanism to create custom equation editor and to seamlessly integrated the editor within any HTML web page. This page show the essential steps to creating an editor tool bar, customising the panels, and interfacing with content on your page.

Prerequisites

Add to <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

Add to <body> :

<div id="toolbar"></div>
<div id="latexInput"></div>
<img id="output"/>

<script type="text/javascript">
    textarea = new EqEditor.TextArea('latexInput')
      .addToolbar(new EqEditor.Toolbar('toolbar'), true);
      .addOutput(new EqEditor.Output('output'));
</script>

TextArea

The TextArea class is used to manage connection between the equation editor toolbar and editable areas within which the mathematical LaTeX markup is shown and can be edited. These editable ares are formed from HTML 'div' elments.

The key features the TextArea manages includes

syntax highlight of the equation
auto suggestions to complete LaTeX commands.

The TextArea is usually associated with a equation editor Toolbar, to provide visual assistance. Multiple TextArea's can be attached to single Toolbar. Conversely you may also attached multiple Toolbars to a single TextArea.

The TextArea can be linked to Output regions that present rendered versions of the code, or provide the LaTeX in a form to be exported into another system (e.g. a forum, Google docs).

constructor

new TextArea(textAreaId: string, focus?: boolean, wrap?: boolean): TextArea
Creates an instance of TextArea for LaTeX input and associates this with an HTML element. To provide some introductory text use the `placeholder`` tag as illustrated in the example below. Any introductory text will be removed once the user starts typing.
```
<div id="input" placeholder="Write LaTeX here"></div>
<script>
var ta = new EqEditor.TextArea('input', true);
</script>
```
Parameters
- textAreaId: string
  
  Id of the target div to be used for editing.
- focus: boolean = false
  
  Activates cursor within the text area.
- wrap: boolean = true
Returns TextArea
- Defined in api/textarea.ts:105

addHistoryMenu

addHistoryMenu(history: History): TextArea
Adds history, with undo and redo, to the TextArea. This requires a history menu to provide the necessary control
Parameters
- history: History
  
  The history menu object
Returns TextArea
- Defined in api/textarea.ts:293

addOutput

addOutput(out: Output): TextArea
Connects an Output component to the current TextArea.
Parameters
- out: Output
  
  The Output component
Returns TextArea
- Defined in api/textarea.ts:278

addRestrictedCommands

addRestrictedCommands(words: string[]): TextArea
Parameters
- words: string[]
Returns TextArea
- Defined in api/textarea.ts:1510

addRestrictedVariables

addRestrictedVariables(words: string[]): TextArea
Parameters
- words: string[]
Returns TextArea
- Defined in api/textarea.ts:1489

addToolbar

addToolbar(toolbar: Toolbar, activate??: boolean): TextArea
Connects a Toolbar component to the current Textarea.
Parameters
- toolbar: Toolbar
  
  The Toolbar component.
- Optional activate: boolean = true
  
  Informs the toolbar to send commands to this textArea
Returns TextArea
- Defined in api/textarea.ts:263

callOutputs

callOutputs(func: string, arg: any): void
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>
```
Parameters
- func: string
- arg: any
Returns void
- Defined in api/textarea.ts:354

clear

clear(): void
Clears the input box (TextArea)

Returns void
- Defined in api/textarea.ts:902

close

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

Returns void
- Defined in api/textarea.ts:306

getTextArea

getTextArea(): HTMLElement
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)" />
```
Returns HTMLElement
- Defined in api/textarea.ts:324

insert

insert(txt: string, newCaretPos??: number, selectedInsertPos??: number): void
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>
```
Parameters
- txt: string
  
  New text to insert
- Optional newCaretPos: number = null
  
  Where to place cursor following the insertion of text. 0 is the start.
- Optional selectedInsertPos: number = null
  
  Where to insert existing selected text within the newly inserted text.
Returns void
- Defined in api/textarea.ts:386

isTextAreaEmpty

isTextAreaEmpty(): boolean
Returns true if the current TextArea is empty, false otherwise.

Returns boolean
- Defined in api/textarea.ts:915

makeArrayMatrix

makeArrayMatrix(type: string, start: string, end: string): void
Generates the LaTeX for an array with the specified dimensions and inserted this into the active TextArea.
Parameters
- type: string
  
  Sets the type of array, e.g. pmatrix
- start: string
  
  Start token
- end: string
  
  End token
Returns void
- Defined in api/textarea.ts:510

makeEquationsMatrix

makeEquationsMatrix(type: string, isNumbered?: boolean, isConditional?: boolean): void
Generates the LaTeX for a Matrix and inserts this into the active TextArea.
Parameters
- type: string
  
  Type of matrix to generate e.g. pmatrix
- isNumbered: boolean = false
  
  If true indicates the equation is numbered.
- isConditional: boolean = false
  
  If true indicates the equation is conditional.
Returns void
- Defined in api/textarea.ts:480

notifyHistoryMenus

notifyHistoryMenus(): void
NEW!

Notifies all connected History Menus of changes.

Returns void
- Defined in api/textarea.ts:366

notifyOutputs

notifyOutputs(): void
NEW! Notifies all connected Outputs of changes.

Returns void
- Defined in api/textarea.ts:331

pushToHistory

pushToHistory(): void
Pushes any text from the current TextArea to the History stack. Which allows further changes to be undone.

Returns void
- Defined in api/textarea.ts:1428

redoHistory

redoHistory(): void
Reverts an undone change.

Returns void
- Defined in api/textarea.ts:1391

setRestrictMode

setRestrictMode(mode: number): TextArea
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
Parameters
- mode: number
Returns TextArea
- Defined in api/textarea.ts:1520

setRestrictedCommands

setRestrictedCommands(words: string[]): TextArea
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.
Parameters
- words: string[]
  
  Array of allowable words. RegEx expressions can also be used.
Returns TextArea
- Defined in api/textarea.ts:1501

setRestrictedVariables

setRestrictedVariables(words: string[]): TextArea
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'])
```
Parameters
- words: string[]
  
  Array of allowable words. RegEx expressions can also be used.
Returns TextArea
- Defined in api/textarea.ts:1481

undoHistory

undoHistory(): void
Undoes the last action. Repeated called will unwind changes to the input area.

Returns void
- Defined in api/textarea.ts:1407

updateMatrixDims

updateMatrixDims(text: string): void
Changes the dimensions of an existing selected matrix
Parameters
- text: string
  
  The selected text
Returns void
- Defined in api/textarea.ts:803

validate

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

Returns boolean
- Defined in api/textarea.ts:1529

`Static` link

link(textAreaId: string, focus?: boolean, wrap?: boolean): TextArea
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>
```
Parameters
- textAreaId: string
  
  Id of the target div to be used for editing.
- focus: boolean = false
  
  Activates cursor within the text area
- wrap: boolean = true
Returns TextArea
- Defined in api/textarea.ts:252

History

This class is responsible to generate the History buttons.

constructor

new History(historyMenuId: string): History
Creates an instance of History.
Parameters
- historyMenuId: string
  
  The div's id that history menu will be rendered.
Returns History
- Defined in history/history.ts:113

setActiveTextArea

setActiveTextArea(textArea: TextArea): void
Connects the History buttons with the TextArea provided as parameter.
Parameters
- textArea: TextArea
  
  The TextArea object to connect with
Returns void
- Defined in history/history.ts:233

Output

The EqEditor Output class provides a means of extracting content from the editable TextArea's in a variety of forms. Initially this is used to provide an example of the fully rendered equation as a graphical image. Output can also format the LaTeX for inclusion in third-party blogs, forums.

One or more Outputs is attached to a TextArea. The Output can then be configured with output formats, fonts, fontsize, dpi, etc.

constructor

new Output(divOutputId?: string, outputFormat?: string): Output
Creates an instance of the Output class, which links output from the Equation editor to an HTML element on the page. This is used to export LaTeX content from an associated TextArea in various forms for display or inclusion in other web tools. e.g.:
```
<div id="entry"></div>
<img id="output"/>
<script>
   EqEditor.TextArea.link('entry')
       .addOutput(new EqEditor.Output('output', 'url'));
</script>
```
The outputFormat sent to the exported area can be one of: wp - Word Press. phpBB - php Bulletin Board. tw - Tiny Wiki. url - Unique web address of the rendered image. urlencoded - Same as url by with additional encoding of special characters. pre - HTML pre element with xml language assigned to latex. Used by some forums. doxygen - DOxygen format. html - HTML image element. latex - Raw latex.
Parameters
- divOutputId: string = null
  
  The Div Id that the Output class will render.
- outputFormat: string = null
  
  One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns Output
- Defined in output/output.ts:122

addExportArea

addExportArea(divElementId: string, exportType: string): Output
Connects an export area with the current Output and returns this Output Object.
Parameters
- divElementId: string
  
  The Div Id of the Export Area.
- exportType: string
  
  One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns Output
- Defined in output/output.ts:533

connectTextArea

connectTextArea(textAreaId: string): void
Links Output to a TextArea so it will display the formatted equation for that text.
Parameters
- textAreaId: string
  
  The TextArea Id
Returns void
- Defined in output/output.ts:460

download

download(filename??: string): void
Downloads the current equation.
Parameters
- Optional filename: string = ...
Returns void
- Defined in output/output.ts:555

exportAs

exportAs(exportType: string): string
Interface function for exporting the equation, returning a text string in the appropriate type.
Parameters
- exportType: string
  
  One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns string
- Defined in output/output.ts:516

getEquation

getEquation(): string
Returns the equation in a compact form, removing all redundant spaces.

Returns string
- Defined in output/output.ts:269

getEquationURL

getEquationURL(download?: boolean): string
Returns the equation as a text string.
Parameters
- download: boolean = false
  
  If true, downloads rendered equation, otherwise returns image
Returns string
- Defined in output/output.ts:251

getExportOptions

getExportOptions(): string[]
Returns the supported export options.

Returns string[]
- Defined in output/output.ts:238

getInline

getInline(): boolean
Returns the current inline status.

Returns boolean
- Defined in output/output.ts:244

getSupportedColors

getSupportedColors(): any[]
Returns the supported output colours.

Returns any[]
- Defined in output/output.ts:233

getSupportedDpi

getSupportedDpi(): string[]
Returns the supported output DPI.

Returns string[]
- Defined in output/output.ts:223

getSupportedFontSizes

getSupportedFontSizes(): any[]
Returns the supported output font sizes.

Returns any[]
- Defined in output/output.ts:228

getSupportedFonts

getSupportedFonts(): any[]
Returns the supported output fonts.

Returns any[]
- Defined in output/output.ts:218

getSupportedFormats

getSupportedFormats(): string[]
Returns the supported output formats.

Returns string[]
- Defined in output/output.ts:213

setBackground

setBackground(backgroundColor: string): Output
Sets the Background Color of the Output.
```
   EqEditor.Output.link('output', 'url')
       .setBackground('red');
```
Parameters
- backgroundColor: string
  
  One of ['', 'white', 'black', 'red', 'green', 'blue']
Returns Output
- Defined in output/output.ts:420

setDpi

setDpi(dpi: string): Output
Sets the Dpi of the Output.
```
   EqEditor.Output.link('output', 'url')
       .setDpi('110');
```
Parameters
- dpi: string
  
  One of ['50', '80', '100', '110', '120', '150', '200', '300']
Returns Output
- Defined in output/output.ts:377

setExportFormat

setExportFormat(format: string): Output
Sets the Format of the Output.
Parameters
- format: string
  
  One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns Output
- Defined in output/output.ts:281

setFont

setFont(font: string): 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
```
   EqEditor.Output.link('output', 'url')
       .setFont('tx');
```
Parameters
- font: string
  
  One of ['','jvn','cmb','phv','phn','tx','px','cs']
Returns Output
- Defined in output/output.ts:355

setFontSize

setFontSize(fontSize: string): Output
Sets the font size of the Output.
```
   EqEditor.Output.link('output', 'url')
       .setFontSize('LARGE');
```
Parameters
- fontSize: string
  
  One of ['tiny', 'small', '', 'large', 'LARGE', 'huge']
Returns Output
- Defined in output/output.ts:398

setFormat

setFormat(format: string): 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?'
```
   EqEditor.Output.link('output', 'url')
       .setFormat('pdf');
```
Parameters
- format: string
  
  One of ['gif', 'pdf', 'png', 'svg', 'emf']
Returns Output
- Defined in output/output.ts:328

setInline

setInline(flag?: boolean): Output
Sets the Inline mode of the Output.
```
   EqEditor.Output.link('output', 'url')
       .setInline(true);
```
Parameters
- flag: boolean = true
  
  Value to set inline mode
Returns Output
- Defined in output/output.ts:444

setRenderURL

setRenderURL(renderURL: string): 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 of the rendering service.
```
<div id="entry"></div>
<img id="output"/>
<script>
   EqEditor.TextArea.link('entry')
       .addOutput(EqEditor.Output.link('output', 'url')
           .setRenderURL('https://latex.codecogs.com')
           .setFont('phv');
       );
</script>
```
Parameters
- renderURL: string
  
  URL formatted for CodeCogs equation renderer
Returns Output
- Defined in output/output.ts:308

updateOutput

updateOutput(): void
Updates the Output to reflect new changes.

Returns void
- Defined in output/output.ts:453

`Static` link

link(divOutputId?: string, outputFormat?: string): Output
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>
```
Parameters
- divOutputId: string = null
  
  The Div Id that the Output class will render
- outputFormat: string = null
  
  One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns Output
- Defined in output/output.ts:206

Toolbar

The EqEditor Toolbar class is the core to CodeCogs Equation Editor and linked to one more more editable TextArea's. The toolbar provide shortcuts to common LaTeX commands and can be customised to show a range of panels and layouts.

constructor

new Toolbar(toolbarElementId: string, design?: any, scale?: number): Toolbar
Places the Equation Editor toolbar on the page, e.g.
```
<div id="toolbar"></div>
<div id="input"></div>
<script>
  var tb = new EqEditor.Toolbar('toolbar');
  tb.addTextArea(new EqEditor.TextArea('input'), true);
</script>
```
You can use a range of standard toolbars. Currently these include: 'full', 'mini', 'chemistry'. e.g.
```
  var tb = new EqEditor.Toolbar('toolbar','mini');
```
Alternative you can select the panels required in any order, e.g.
```
  var tb = new EqEditor.Toolbar('toolbar', '[["operators_core","greeklower","chemistry_arrows",
                                              "mhchem","mhchem_arrows","colors"]]');
```
Parameters
- toolbarElementId: string
  
  Id of the the layer into which the toolbar is placed.
- design: any = 'default'
  
  The toolbar design or JSON array with the panels to be used.
- scale: number = 1
  
  Optional scaling of toolbar buttons. Default=1.
Returns Toolbar
- Defined in toolbar/toolbar.ts:80

addTextArea

addTextArea(textArea: TextArea, reverseLink?: boolean): Toolbar
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.
Parameters
- textArea: TextArea
  
  The TextArea object to associate with the Toolbar.
- reverseLink: boolean = true
  
  If true it also adds the Toolbar to the TextArea.
Returns Toolbar
- Defined in toolbar/toolbar.ts:212

appendPanel

appendPanel(id: number, panel: string | object): Toolbar
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"],
           }
       ]
   });
```
Parameters
- id: number
  
  The id of the toolbar. Toolbar numbers start from 0.
- panel: string | object
  
  The name of a standard panel or JSON object with details of the button.
Returns Toolbar
- Defined in toolbar/toolbar.ts:589

getPanel

getPanel(panelName: string): HTMLDivElement
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.
Parameters
- panelName: string
  
  The name of the panel to retrieve
Returns HTMLDivElement
- Defined in toolbar/toolbar.ts:325

moveTo

moveTo(toolbarElementId: string): 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.
Parameters
- toolbarElementId: string
  
  Id of the the layer into which the toolbar is to be moved
Returns Toolbar
- Defined in toolbar/toolbar.ts:173

setActiveTextArea

setActiveTextArea(textArea: TextArea): Toolbar
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.
Parameters
- textArea: TextArea
  
  The TextArea to make active.
Returns Toolbar
- Defined in toolbar/toolbar.ts:227

`Static` link

link(toolbarElementId: string, design?: any, scale?: number): Toolbar
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"]]);
```
Parameters
- toolbarElementId: string
  
  Id of the the layer into which the toolbar is placed.
- design: any = 'default'
  
  The toolbar design or JSON array with the panels to be used.
- scale: number = 1
  
  Optional scaling of toolbar buttons. Default=1.
Returns Toolbar
- Defined in toolbar/toolbar.ts:150

Parameter Details

The equation editor uses some specific parameter values to modify the behaviour of certain functions. Below are the

exportType

Used throughout the Output Class to determine which format to render the equations in.

latex	Raw LaTeX markup	`1+sin(x)`
encoded	Encoded LaTeX markup	`1+%20sin(x)` - Uses the javascript escape function and converts '+' rto +
wp	Wordpress markup	`[latex]1+sin(x)[/latex]`
phpBB	phpBB markup	`[tex]1+sin(x)[/tex]`
tw	Tiddly Wiki	`[img[http://latex.codecogs.com/gif.latex?1+sin(x)]]`
url	URL link to equation	`http://latex.codecogs.com/gif.latex?1+sin(x)`
urlencoded	Encoded URL link to equation	`http://latex.codecogs.com/gif.latex?1+sin%28x%29`
pre	HTML code using pre-tags	`<pre xml:lang="latex">1+sin(x)</pre>`
doxygen	DOxygen markup	`\f[1+sin(x)\f]`
html	HTML code for use on a webpage	`<img src="latex.codecogs.com?gif.latex=1+sin(x)" />`

dpi

Stands for Dots Per Inch and is used throughout the Output Class to determine the resolution to render equations in. Note that a larger DPI often increases the size of the rendered equation as well.

50	Lowest Resolution
80
100
110
120
150
200
300	Highest Resolution

Usage

Plugins

Equation Editor API

Prerequisites

TextArea

constructor

Parameters

textAreaId: string

focus: boolean = false

wrap: boolean = true

Returns TextArea

addHistoryMenu

Parameters

history: History

Returns TextArea

addOutput

Parameters

out: Output

Returns TextArea

addRestrictedCommands

Parameters

words: string[]

Returns TextArea

addRestrictedVariables

Parameters

words: string[]

Returns TextArea

addToolbar

Parameters

toolbar: Toolbar

Optional activate: boolean = true

Returns TextArea

callOutputs

Parameters

func: string

arg: any

Returns void

clear

Returns void

close

Returns void

getTextArea

Returns HTMLElement

insert

Parameters

txt: string

Optional newCaretPos: number = null

Optional selectedInsertPos: number = null

Returns void

isTextAreaEmpty

Returns boolean

makeArrayMatrix

Parameters

type: string

start: string

end: string

Returns void

makeEquationsMatrix

Parameters

type: string

isNumbered: boolean = false

isConditional: boolean = false

Returns void

notifyHistoryMenus

Returns void

notifyOutputs

Returns void

pushToHistory

Returns void

redoHistory

Returns void

setRestrictMode

Parameters

mode: number

Returns TextArea

setRestrictedCommands

Parameters

words: string[]

Returns TextArea

setRestrictedVariables

`Optional` activate: boolean = true

`Optional` newCaretPos: number = null

`Optional` selectedInsertPos: number = null

`Static` link

`Optional` filename: string = ...