:: Table of Contents

Usage

Plugins

LaTeX IT CK Editor v5 Tiny MCE v6 Blogger 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://latex.codecogs.com/js/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

Add to <body> :

<div id="toolbar"></div>
<div id="latexInput" autocorrect="off">2+sin(x)</div>
<img id="output"/>

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

TextArea

The TextArea class is used to manage connection of the equation editor to editable areas where the mathematical LaTeX markup is shown and can be edited. These editable ares are formed from plane HTML 'div' elments, which are transformed into interactive elements.

The key features the TextArea manages includes

syntax highlight of the equation, which include underlining active matching brackets.
providing suggestions to complete LaTeX commands.

The TextArea is usually associated with a equation editor Toolbar, to provide visual assistance commands. 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).

constructor

new TextArea(textAreaId: string, focus?: boolean):
Creates an instance of TextArea to track text input in an HTML element.
```
<div id="input"></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.
Returns
- Defined in api/textarea.ts:90

Caret_get

Caret_get(): number
Saves the current cursor position this.caretPos

Returns number
- Defined in api/textarea.ts:521

Caret_set

Caret_set(position: number): void
Sets the current cursor position.
Parameters
- position: number
  
  Postion of cursor
Returns void
- Defined in api/textarea.ts:556

addHistoryMenu

addHistoryMenu(history: ):
Inserts the history menu to textarea's list
Parameters
- history:
  
  The history menu object
Returns
- Defined in api/textarea.ts:249

addOutput

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

addToolbar

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

clear

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

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

clearIntro

clearIntro(): void
Removes the introductory text that appears within the input box.

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

close

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

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

getTextArea

getTextArea(): HTMLElement
Returns the current TextArea object

Returns HTMLElement
- Defined in api/textarea.ts:269

insert

insert(txt: string, newCaretPos??: number, selectedInsertPos??: number): void
Used to insert commands into the active HTML element at the current cursor position. For example to insert text and place 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
- Optional selectedInsertPos: number = null
  
  Where to insert existing selected text within the newly inserted text.
Returns void
- Defined in api/textarea.ts:307

isTextAreaEmpty

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

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

pushToHistory

pushToHistory(): void
Pushes any text from the current TextArea to the History stack.

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

redoHistory

redoHistory(): void
Implements redoing an undone change.

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

undoHistory

undoHistory(): void
Undoes an action.

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

`Static` link

link(textAreaId: string, focus?: boolean):
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
Returns
- Defined in api/textarea.ts:209

History

This class is responsible to generate the History buttons.

constructor

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

setActiveTextArea

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

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, fonsize, dpi, etc.

constructor

new Output(divOutputId?: string, outputFormat?: string):
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
- Defined in output/output.ts:121

addExportArea

addExportArea(divElementId: string, exportType: string):
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
- Defined in output/output.ts:483

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:404

download

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

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:466

getEquationText

getEquationText(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:246

getExportOptions

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

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

getInline

getInline(): boolean
Returns the current inline status.

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

getSupportedColors

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

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

getSupportedDpi

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

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

getSupportedFontSizes

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

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

getSupportedFonts

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

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

getSupportedFormats

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

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

setBackground

setBackground(backgroundColor: string):
Sets the Background Color of the Output.
Parameters
- backgroundColor: string
  
  One of ['', 'bg{white}', 'bg{black}', 'bg{red}', 'bg{green}', 'bg{blue}']
Returns
- Defined in output/output.ts:369

setDpi

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

setExportFormat

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

setFont

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

setFontSize

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

setFormat

setFormat(format: string):
Sets the graphical Format of the Output, but changing the url of the request to the equation rendering service. For example 'gif' uses '?', where as 'svg' uses '?'
Parameters
- format: string
  
  One of ['gif', 'pdf', 'png', 'svg', 'emf']
Returns
- Defined in output/output.ts:296

setInline

setInline(flag?: boolean):
Sets the Inline mode of the Output.
Parameters
- flag: boolean = true
  
  Value to set inline mode
Returns
- Defined in output/output.ts:388

setRenderURL

setRenderURL(renderURL: string):
Sets the URL which will render the active equation. The default is to use '', and you would typically change this to use custom installation fo the rendering service.
Parameters
- renderURL: string
  
  URL formatted for CodeCogs equation renderer
Returns
- Defined in output/output.ts:281

updateOutput

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

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

`Static` link

link(divOutputId?: string, outputFormat?: string):
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.
- ```
- EqEditor.TextArea.link('entry')
- .addOutput(EqEditor.Output.link('output', 'url')
- ```
 .setFont('phv')
```
- ```
 .setFontSize('LARGE')    
```
- );
- ```
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
- Defined in output/output.ts:201

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?: string):

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: string = 'default'

The toolbar design or JSON array with the panels to be used.

Returns

addTextArea

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

getIconsPanels

getIconsPanels(): any
Returns the Icons of each Panel.

Returns any
- Defined in toolbar/toolbar.ts:298

getPanel

getPanel(panelName: string): HTMLDivElement
Returns the HTMLDivElement for a equation editor toolbar panel based on its name.
Parameters
- panelName: string
  
  The name of the panel to retrieve
Returns HTMLDivElement
- Defined in toolbar/toolbar.ts:311

getToolbars

getToolbars(): any
Returns the Toolbars.

Returns any
- Defined in toolbar/toolbar.ts:303

moveTo

moveTo(toolbarElementId: string):

Moves the editor from one location to another. This is useful if you want to provide dynamic position of the toolbar with multiple inputs. Fpr 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 = new EqEditor.Toolbar('editor1', true)
    .addTextArea(mew EqEditor.TextArea('input1'), true)
    .addTextArea(mew EqEditor.TextArea('input2'), true);
</script>

Parameters

toolbarElementId: string

Id of the the layer into which the toolbar is to be moved

Returns

setActiveTextArea

setActiveTextArea(textArea: ):
Sets the specified TextArea as the current active one.

Returns the current Toolbar object.
Parameters
- textArea:
  
  The TextArea to make active
Returns
- Defined in toolbar/toolbar.ts:202

`Static` link

link(toolbarElementId: string, design?: string):
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: string = 'default'
  
  The toolbar design or JSON array with the panels to be used.
Returns
- Defined in toolbar/toolbar.ts:128

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

Returns

Caret_get

Returns number

Caret_set

Parameters

position: number

Returns void

addHistoryMenu

Parameters

history:

Returns

addOutput

Parameters

outPut:

Returns

addToolbar

Parameters

toolbar:

Optional activate: boolean = true

Returns

clear

Returns void

clearIntro

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

pushToHistory

Returns void

redoHistory

Returns void

undoHistory

Returns void

Static link

Parameters

textAreaId: string

focus: boolean = false

Returns

History

constructor

Parameters

historyMenuId: string

Returns

setActiveTextArea

Parameters

textArea:

Returns void

Output

constructor

Parameters

divOutputId: string = null

outputFormat: string = null

Returns

addExportArea

Parameters

divElementId: string

exportType: string

Returns

connectTextArea

Parameters

textAreaId: string

Returns void

`Optional` activate: boolean = true

`Optional` newCaretPos: number = null

`Optional` selectedInsertPos: number = null

`Static` link

`Optional` filename: string = ...

`Static` link