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:

Initialising the Editor

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.

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:

Using jQuery - Open Toolbar 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.

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)

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.

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)

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,

ExportButton subclass

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,