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.
Position 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.
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 requirements, 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.
Many of the functions return reference to Output
which allows the commands to be chained together with others from this class.
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>
Optional
divOutputId: string = nullThe Div Id that the Output class will render.
Optional
outputFormat: string = nullOne of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]
Connects an export area with the current Output. Returns this Outpur Object.
The unique identified (id
) of DIV element to be used at output.
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 = ...Name of the file to download.
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 in web friendly form that can be processed by rendering service like http://latex.codecogs.com or equivalent.
If true, downloads rendered equation, otherwise returns image
Returns supported export options.
Returns current inline status.
Returns supported output colours.
Returns supported output DPI.
Returns supported output font sizes.
Returns supported output fonts.
Returns supported output formats.
Sets the Background Color of equation.
One of ['', 'bg{white}', 'bg{black}', 'bg{red}', 'bg{green}', 'bg{blue}']
Sets the Dots Per Inch (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:
One of ['','jvn','cmb','phv','phn','tx','px','cs']
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?'
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 'https://latex.codecogs.com', and you would typically change this to use custom installation fo the rendering service.
URL formatted for CodeCogs equation renderer
Trigger the updating of the Output to reflect any 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.
<div id="entry"></div>
<img id="output"/>
<script>
EqEditor.TextArea.link('entry')
.addOutput(EqEditor.Output.link('output', 'url')
.setFont('phv')
.setFontSize('LARGE')
);
</script>
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.
Many of the functions return reference to Toolbar
which allows the commands to be chained together with others from this class.
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>
Id of the the layer into which the toolbar is placed
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 Editor 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 associated Toolbar commands, e.g.
<div id="toolbar"></div>
<div id="input"></div>
<script>
EqEditor.Toolbar.link('toolbar')
.addTextArea(new EqEditor.TextArea('input'), true);
</script>
Id of the the layer into which the toolbar is placed
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 areas are formed from plane HTML 'div' elements, 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).
Many of the functions return reference to
TextArea
which allows the commands to be chained together with others from this class.