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.
The following css and javascript must be loaded within the HTML page header:
Add to <head> :
<link rel="stylesheet" href="https://latex.oncodecogs.com/css/equation-embed.css"/>
<script src="https://latex.oncodecogs.com/js/eq_config.js"></script>
<script src="https://latex.oncodecogs.com/js/eq_editor-lite-19.js"></script>
To place the Editor within a page you need the following minimum elements within your web-page:
<div id="editor"></div>
.<textarea id="testbox"></textarea>
<img id="equation"/>
EqEditor.embed('editor','')
.EqEditor.add(new EqTextArea('equation', 'testbox'),false);
The complete example looks like:
Add to <body> :
<div id="editor"></div>
<textarea id="testbox"></textarea>
<img id="equation"/>
<script>
EqEditor.embed('editor','');
EqEditor.add(new EqTextArea('equation', 'testbox'),false);
</script>
The EqEditor class is the core to CodeCogs Equation Editor and links an instance of the toolbar to the <textarea> that are used to enter mathematical LaTeX code
Places the Equation Editor toolbar on the page.
zh-cn | Cantonese |
nl-nl | Dutch (Nederlands) |
nl-be | Dutch Belgian |
en-us | English USA |
en-en | English British |
fr-fr | French (Fraçais) |
de-de | German (Deutsch) |
el-el | Greek (Έλληνας) |
lt-lt | Litduanian (lietuvių kalba) |
hu-hu | Hungarian (Magyar) |
it-it | Italian (Italiano) |
ir-fa | Persian (Farsi) |
pl-pl | Polish (Polski) |
ro-ro | Romanian (Roman) |
ru-ru | Rusian (русский язык) |
es-es | Spanish (Español) |
tr-tr | Turkish (Türkçe) |
uk-uk | Ukranian (українець) |
vi-vi | Vietnamese |
Links the Equation Editor toolbar with one or more <textarea>'s, this allow the page to have any number of additional input areas connected to one toolbar. After defining each <textarea>, associate it with a toolbar using EqEditor.add(...).
Add to <body> :
<div id="toolbar"></div>
<textarea id="testbox" rows="3" cols="40"></textarea>
<img id="equation" />
<br/>
<textarea id="testbox2" rows="3" cols="40"></textarea>
<img id="equation2" />
<script>
EqEditor.embed('toolbar');
EqEditor.add(new EqTextArea('equation2', 'testbox2'),false);
EqEditor.add(new EqTextArea('equation3', 'testbox3'),false);
</script>
Adds the given text to the identified text area, at the current cursor position.
Change the output format of the preview equation
Although each page has a limit of one toolbar, this can be moved dynamically to any location.
The following code illustrates how you might add a second <textarea> which, when selected, moves the toolbar above it:
<div id=""></div>
<textarea id="" onclick="EqEditor.moveto(toolbar2)"></textarea>
The EqTextArea object controls the behaviour of each <textarea> associated with the Editor toolbar. It also (optionally) allows rendering zones to be formed that display the content of the input textarea in a graphical form.
Initialised an instance of the EqTextArea, which associated the <textarea> with an equation preview
toolbar = new EqEditor.Toolbar('toolbar');
textarea = new EqEditor.TextArea('latexInput');
toolbar.addTextArea(textarea);
Connect a Toolbar to the TextArea.
Associate additional regions with a single <textarea>, enabling a LaTeX equation to be displayed or formated in various other ways. This is typically used to automatically export the equaton into other systems; perhaps another HTML page.
Add to <body> :
<div id="editor"></div>
<textarea id="testbox" rows="3" cols="40"></textarea>
<img id="equation" />
<h3>Selection of Export Areas</h3>
<p>HTML:</p>
<textarea id="exportarea1" rows="3" cols="40"></textarea>
<p>HTML with hyperlink to edit equation, placed within a DIV layer:</p>
<div id="exportarea2"></div>
<p>Tidly Wiki</p>
<textarea id="exportarea3" rows="3" cols="40"></textarea>
<p>Equation URL, placed within an image element:</p>
<img id="exportarea4"/>
<p>Equation URL:</p>
<textarea id="exportarea5" rows="3" cols="40"></textarea>
<script>
toolbar = new EqEditor.Toolbar('editor');
textarea = new EqEditor.TextArea('testbox');
toolbar.addTextArea(textarea);
textarea.addOutput(new EqEditor.Output('exportarea1','html'));
textarea.addOutput(new EqEditor.Output('exportarea3','tw'));
textarea.addOutput(new EqEditor.Output('exportarea4','url'));
textarea.addOutput(new EqEditor.Output('exportarea5','url'));
</script>
Which creates :
This function return the text from associated <textarea> in a formated form, according to the type.
latex | Raw LaTeX markup, 1+sin(x) |
safe | Safe LaTeX markup, 1+&space;sin(x) - retains most of the equation in human readable form, but encoded spaces,plus and hash. |
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] |
htmledit | HTML code for use on a webpage with link to edit equation, <a href="www.codecogs.com/eqnedit?latex=1+sin(x)"><img src="latex.codecogs.com?gif.latex=1+sin(x)" /></a> |
html | HTML code for use on a webpage, <img src="latex.codecogs.com?gif.latex=1+sin(x)" /> |
The Export Buttons functionality allows a javascript function to be called, with the content of the <textarea> passed as input. This would usually be used to insert an equation into another HTML editor (perhaps CKEditor etc.) so this response will almost always be triggered by a button (hence the name).
Add to <body> :
<div id="toolbar"></div>
<textarea id="testbox" rows="3" cols="40"></textarea>
<img id="equation" />
<p>
<input id="copybutton" type="button" class="greybutton" value="Export Button 1" />
<input id="copybutton2" type="button" class="greybutton" value="Export Button 2" />
</p>
<textarea id="buttonexport" rows="3" cols="40"></textarea>
<script type="text/javascript">
EqEditor.embed('toolbar');
var a=new EqTextArea('equation', 'testbox');
EqEditor.add(a,false);
EqnExport=function(text) { EqEditor.addText(document, 'buttonexport', text); };
EqEditor.ExportButton.add(a, 'copybutton', EqnExport, 'html');
EqnExport2=function(text) { alert(text); };
EqEditor.ExportButton.add(a, 'copybutton2', EqnExport2, 'html');
</script>
Which creates :
latex | $1+sin(x)$ or \[1+sin(x)\] |
doxygen | \f$1+sin(x)\f$ or \f[1+sin(x)\f] |
phpBB | [tex]1+sin(x)[/tex] |
tw | [img[https://latex.oncodecogs.com/png.image?1+sin(x)]] |
html | <img src="https://latex.oncodecogs.com/png.latex?1+sin(x)" /> |
pre | <pre xml:lang="latex">1+sin(x)</pre> |
zh-cn | Cantonese |
nl-nl | Dutch (Nederlands) |
nl-be | Dutch Belgian |
en-us | English USA |
en-en | English British |
fr-fr | French (Fraçais) |
de-de | German (Deutsch) |
el-el | Greek (Έλληνας) |
lt-lt | Lithuanian (lietuvių kalba) |
hu-hu | Hungarian (Magyar) |
it-it | Italian (Italiano) |
ir-fa | Persian (Farsi) |
pl-pl | Polish (Polski) |
ro-ro | Romanian (Roman) |
ru-ru | Russian (русский язык) |
es-es | Spanish (Español) |
tr-tr | Turkish (Türkçe) |
uk-uk | Ukrainian (українець) |
vi-vi | Vietnamese |
To support more languages, we need help from native speakers. The language template (English USA) is available at: Language Template. Instructions are at the top of the document, which you can submit to us at Email CodeCogs. Your help is greatly appreciated. Please add your name to the credits line within the translation file.