Tel: +44 (0) 20 7193 9303 Email Us Join CodeCogs

Or login with:

* Warning: CodeCogs is not responsible for content on external sites.

Editor API

This page described the Equation Editor API (Application Programming Interface), which allows you to customise and embedded the core elements of the editor into any HTML page. Using this interface you can build your own destinct Editor, arranged as you requre.

Furthermore the embedded our the editor onto practically any HTML page, provides a seamless experience for your users, which giving them easy access to the toolbar exactly when they need it.

Prerequisites

The following css and javascript must be loaded within the head of your page:

http://latex.codecogs.com/css/equation-embed.css
http://latex.codecogs.com/js/eq_config.js
http://latex.codecogs.com/js/eq_editor-lite-19.js

Typical content of the page header:

<head>
<link rel="stylesheet" type="text/css"
  href="http://latex.codecogs.com/css/equation-embed.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://latex.codecogs.com/css/ie6.css" type="text/css"/>
<![endif]-->
<script type="text/javascript" 
  src="http://latex.codecogs.com/js/eq_config.js" ></script>
<script type="text/javascript" 
  src="http://latex.codecogs.com/js/eq_editor-lite-18.js" ></script>
</head>

Initialising the Editor

Example 1

Example 1 (mini toolbar)

To place the Editor Toolbar on a page, call EqEditor.embed(...) with the 'id' of a <div> element within which the toolbar is placed. The toolbar is then associated with at least one <textarea> (into which the user places LaTeX equations) using a EqTextArea object. These javascript functions must only be run after the html element are defined.

Simple example:

<div id="toolbar"></div>
<textarea id="latexInput" rows="3" cols="40"></textarea>
<img id="equation" align="middle" />

<script type="text/javascript">
  EqEditor.embed(toolbar);
  EqEditor.add(new EqTextArea('equation', 'latexInput'),false);
</script>

creates:

These first three HTML elements can be positioned anywhere on a page; they don't have to be in the order shown. CSS styling can also be used to override the defaults and adjust the look of the toolbar. The most likely typical styles you would change:

  #EqnEditor { margin:0 auto; text-align:center;}
  #hover { background-color:#FFFFCC; border:1px solid #999999; }
  .lightbluebutton { background-color:#4068AE; }
  .bluebutton { background-color:#003794; }
  .greybutton { background-color:#888888; }

Using jQuery - Open Toolbar on Request

Example 7 (open on request)

The Equation editor toolbar does not need to be loaded when the page loads. In the following code we demonstrate how you might choose to use a button click event to open the editor. For simplicity we've used jQuery to manage the button action, but this is not essential. Naturally you can extend this example to show and hide all textarea and visual representation of the equation.

<head>
...
<script type="text/javascript">
$(document).ready(function() 
{
  $('#loadeqneditor').click(function(){
    EqEditor.embed('toolbar','','mini','en-us');
    EqEditor.add(new EqTextArea('equation', 'latexInput'),false);
  });
});
</script>
</head>
<body>
<button id="loadeqneditor">Load Equation Editor</button>
<div id="editor"></div>
<textarea id="latexInput"></textarea>
<img id="equation" />

EqEditor Class

Interface

EqEditor.embed(divID, SID,
design, language)
EqEditor.add(EqTextArea, resize)
EqEditor.addText(document, textareaID, text)
EqEditor.setFormat(format)
EqEditor.moveto(divID)
EqEditor.insert(text,position,insertPosition
EqTextArea EqEditor.getTextArea()

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

EqEditor.embed(divID, SID, design, language)

This places the Equation Editor toolbar on the page.

divID: the id of the the layer into which the editor is placed, e.g., <div id="editor"></div>.
SID [optional]: a unique code that identifies the user, allowing history and preferences to be remembered and saved. For this, we suggest choosing your email address and adding a random sequence of numbers to it for security reasons.
design [optional]: specifies the design of the editor to use. Parameters for design are covered separately here: design.

language [optional]: defines the spoken language to use:

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	Rusian (русский язык)
es-es	Spanish (Español)
tr-tr	Turkish (Türkçe)
uk-uk	Ukranian (українець)
vi-vi	Vietnamese

EqEditor.add(EqTextArea, resize)

Example 2 - Multiple TextAreas

Links the Equation Editor toolbar with at least one <textarea>. The HTML page can any number of additional input areas driven by one toolbar. After defining each additional <textarea>, associate each one with the toolbar using EqEditor.add(...).

EqTextArea: an instance of EqTextArea to be linked with the Equation Editor System.
resize [true:false]: resizes the textarea in proportion to the main window size.

<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 type="text/javascript">
  EqEditor.embed('toolbar');

  EqEditor.add(new EqTextArea('equation2', 'testbox2'),false);   
  EqEditor.add(new EqTextArea('equation3', 'testbox3'),false);
</script>

to create:

EqEditor.addText(document, textareaID, text)

Adds the given text to the identified text area, at the current cursor position.

document: The target window frame. For the current page, use 'document'.
textareaID: The unique ID of the text area. e.g. <textarea id="testbox"></text>, into which the user writes the equation.
text: The text to be added to the current cursor position.

EqEditor.setFormat(format)

Change the output format of the preview equation

format: The output format. One of 'gif','png','pdf'

EqEditor.move(divID)

Example 5 (moving toolbar)

Although each page has a limit of one toolbar, this can be moved dynamically to any location. This is particularly useful for a long page.

divID: the id of the the layer into which the editor is placed, e.g., <div id="editor"></div>.

The following code illustrates how you might add a second <textarea> which, when selected, moves the toolbar above it:

<div id="toolbar2"></div>
<textarea id="testbox2" rows="3" cols="40" onclick="EqEditor.moveto(toolbar2)"></textarea>

EqTextArea Class

Interface

EqTextArea(imageID, textareaID)
[EqTextArea].set(imageID, textareaID)
[EqTextArea].addExportArea(
textareaID, type)
[EqTextArea].exportEquation(type)
[EqTextArea].setText(val)
[EqTextArea].clearText()
[EqTextArea].insertText(val, pos, insertpos)

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.

Constructor EqTextArea(imageID, textareaID)

Initialised an instance of the EqTextArea, which associated the <textarea> with an equation preview

imageID [optional]: unique ID for an image, e.g., <img id="equation" />, that will show generated equations.
textareaID: unique ID for a textarea, e.g., <textarea id="testbox"></textarea>, into which the user writes the equation.

var a=new EqTextArea('equation', 'testbox');
EqEditor.add(a,false);

[EqTextArea].set(imageID, textareaID)

Changes an existing area so that it points to another <textarea> and preview image.

[EqTextArea].addExportArea(ID, type)

Example 3 - ExportArea

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.

ID: unique ID for any area, e.g., <textarea id="exportarea"></textarea>, into which a final equation will be published according to the type specified,
type (see exportEquation).

<div id="toolbar"></div>
<p>LaTeX:</p>
<textarea id="testbox4" rows="3" cols="40"></textarea>
<img id="equation4" />
<p>HTML:</p>
<textarea id="exportarea1" rows="3" cols="40"></textarea>
<p>HTML Edit:</p>
<textarea id="exportarea2" rows="3" cols="40"></textarea>
<p>Tidly Wiki:</p>
<div id="exportarea3"></div>
<p>URL:</p>
<textarea id="exportarea4" rows="3" cols="40"></textarea>
<script type="text/javascript">
  EqEditor.embed('toolbar'); 	
  var a=new EqTextArea('equation4', 'testbox4');
  EqEditor.add(a,false);

  a.addExportArea('exportarea1','html');
  a.addExportArea('exportarea2','htmledit');
  a.addExportArea('exportarea3','tw');
  a.addExportArea('exportarea4','url');

</script>

LaTeX (enter text here):

HTML (for use in an HTML page):

HTML Edit/p>

Tidly Wiki:

URL:

string [EqTextArea].exportEquation(type)

This function return the text from associated <textarea> in a formated form, according to the type.

type: The export type which is one of the following:
- 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)" />

ExportButton subclass

EqEditor.ExportButton.add(EqTextArea,
buttonID, fn, type)

Example 4

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 is always triggered by a button.

EqEditor.ExportButton.add(EqTextArea, buttonID, exportFn, type)

EqTextArea: an instance of EqTextArea to be linked with the Equation Editor System,
buttonID: id of the button that triggers copying,
exportFn: javascript function called when button is pressed,
type: (see exportEquation)

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

creates:

(LaTeX from input boxes above are used here)