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.
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>
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>
Id of the target div to be used for editing.
Activates cursor within the text area.
Saves the current cursor position this.caretPos
Sets the current cursor position.
Postion of cursor
Inserts the history menu to textarea's list
The history menu object
Connects an Output component to the current TextArea.
The Output component
Connects a Toolbar component to the current Textarea.
The Toolbar component.
Optional
activate: boolean = trueInforms the toolbar to send commands to this textArea
Clears the input box (TextArea)
Removes the introductory text that appears within the input box.
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 the current TextArea object
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>
New text to insert
Optional
newCaretPos: number = nullWhere to place cursor following the insertion of text
Optional
selectedInsertPos: number = nullWhere to insert existing selected text within the newly inserted text.
Returns true if the current TextArea is empty, false otherwise.
Pushes any text from the current TextArea to the History stack.
Implements redoing an undone change.
Undoes an action.
Static
linkStatic 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>
Id of the target div to be used for editing.
Activates cursor within the text area
This class is responsible to generate the History buttons.
Creates an instance of History.
The div's id that history menu will be rendered.
Connects the History buttons with the TextArea provided as parameter.
The TextArea object to connect with
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.
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.
The Div Id that the Output class will render.
One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Connects an export area with the current Output and returns this Output Object.
The Div Id of the Export Area.
One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Links Output to a TextArea so it will display the formatted equation for that text.
The TextArea Id
Downloads the current equation.
Optional
filename: string = ...Interface function for exporting the equation, returning a text string in the appropriate type.
One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Returns the equation as a text string.
If true, downloads rendered equation, otherwise returns image
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.
One of ['', 'bg{white}', 'bg{black}', 'bg{red}', 'bg{green}', 'bg{blue}']
Sets the Dpi of the Output.
One of ['50', '80', '100', '110', '120', '150', '200', '300']
Sets the Format of the Output.
One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
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
One of ['','jvn','cmb','phv','phn','tx','px','cs']
Sets the font size of the Output.
One of ['tiny', 'small', '', 'large', 'LARGE', 'huge']
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 '?'
One of ['gif', 'pdf', 'png', 'svg', 'emf']
Sets the Inline mode of the Output.
Value to set inline mode
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.
URL formatted for CodeCogs equation renderer
Updates the Output to reflect new changes.
Static
linkStatic 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.
.setFont('phv')
.setFontSize('LARGE')
The Div Id that the Output class will render *
One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
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.
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"]]');
Id of the the layer into which the toolbar is placed.
The toolbar design or JSON array with the panels to be used.
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.
The TextArea object to associate with the Toolbar.
If true it also adds the Toolbar to the TextArea.
Returns the Icons of each Panel.
Returns the HTMLDivElement for a equation editor toolbar panel based on its name.
The name of the panel to retrieve
Returns the Toolbars.
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>
Id of the the layer into which the toolbar is to be moved
Sets the specified TextArea as the current active one.
Returns the current Toolbar object.
The TextArea to make active
Static
linkA 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"]]');
Id of the the layer into which the toolbar is placed.
The toolbar design or JSON array with the panels to be used.
The equation editor uses some specific parameter values to modify the behaviour of certain functions. Below are the
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)" /> |
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 |
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
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).