:: Table of Contents
Usage
QuickstartEditor integrationAPI
DesignLaTeX rendering
Plugins
LaTeX ITCK Editor v4xTiny MCE v4xBlogger

Equation Editor API

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.

Prerequisites

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>

TextArea

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

  • syntax highlight of the equation, which include underlining active matching brackets.
  • providing suggestions to complete LaTeX commands.

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.

constructor

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

    Parameters

    • textAreaId: string

      Id of the target div to be used for editing.

    • focus: boolean = false

      Activates cursor within the text area.

    Returns TextArea

Caret_get

  • Saves the current cursor position this.caretPos

    Returns number

Caret_set

  • Sets the current cursor position.

    Parameters

    • position: number

      Position of cursor

    Returns void

addHistoryMenu

  • Inserts the history menu to TextArea's list

    Parameters

    • history: History

      The history menu object

    Returns TextArea

addOutput

  • Connects an Output component to the current TextArea.

    Parameters

    • output: Output

      The Output component

    Returns TextArea

addToolbar

  • Connects a Toolbar component to the current Textarea.

    Parameters

    • toolbar: Toolbar

      The Toolbar component.

    • Optional activate: boolean = true

      Informs the toolbar to send commands to this textArea

    Returns TextArea

clear

  • Clears the input box (TextArea)

    Returns void

clearIntro

  • Removes the introductory text that appears within the input box.

    Returns void

getTextArea

  • Returns the current TextArea object

    Returns HTMLElement

insert

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

    Parameters

    • txt: string

      New text to insert

    • Optional newCaretPos: number = null

      Where to place cursor following the insertion of text

    • Optional selectedInsertPos: number = null

      Where to insert existing selected text within the newly inserted text.

    Returns void

isTextAreaEmpty

  • Returns true if the current TextArea is empty, false otherwise.

    Returns boolean

pushToHistory

  • Pushes any text from the current TextArea to the History stack.

    Returns void

redoHistory

  • Implements redoing an undone change.

    Returns void

undoHistory

  • Undoes an action.

    Returns void

Static link

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

    Parameters

    • textAreaId: string

      Id of the target div to be used for editing.

    • focus: boolean = false

      Activates cursor within the text area

    Returns TextArea

History

This class is responsible to generate the History buttons.

constructor

  • Creates an instance of History.

    Parameters

    • historyMenuId: string

      The div's id that history menu will be rendered.

    Returns History

setActiveTextArea

  • Connects the History buttons with the TextArea provided as parameter.

    Parameters

    • textArea: TextArea

      The TextArea object to connect with

    Returns void

Output

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.

constructor

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

    Parameters

    • Optional divOutputId: string = null

      The Div Id that the Output class will render.

    • Optional outputFormat: string = null

      One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]

    Returns Output

addExportArea

  • Connects an export area with the current Output. Returns this Outpur Object.

    Parameters

    • divElementId: string

      The unique identified (id) of DIV element to be used at output.

    • exportType: string

      One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]

    Returns Output

connectTextArea

  • Links Output to a TextArea so it will display the formatted equation for that text.

    Parameters

    • textAreaId: string

      The TextArea Id

    Returns void

download

  • Downloads the current equation.

    Parameters

    • Optional filename: string = ...

      Name of the file to download.

    Returns void

exportAs

  • Interface function for exporting the equation, returning a text string in the appropriate type.

    Parameters

    • exportType: string

      One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]

    Returns string

getEquationText

  • Returns the Equation in web friendly form that can be processed by rendering service like http://latex.codecogs.com or equivalent.

    Parameters

    • download: boolean = false

      If true, downloads rendered equation, otherwise returns image

    Returns string

getExportOptions

  • Returns supported export options.

    Returns string[]

getInline

  • Returns current inline status.

    Returns boolean

getSupportedColors

  • Returns supported output colours.

    Returns any[]

getSupportedDpi

  • Returns supported output DPI.

    Returns string[]

getSupportedFontSizes

  • Returns supported output font sizes.

    Returns any[]

getSupportedFonts

  • Returns supported output fonts.

    Returns any[]

getSupportedFormats

  • Returns supported output formats.

    Returns string[]

setBackground

  • Sets the Background Color of equation.

    Parameters

    • backgroundColor: string

      One of ['', 'bg{white}', 'bg{black}', 'bg{red}', 'bg{green}', 'bg{blue}']

    Returns Output

setDpi

  • Sets the Dots Per Inch (dpi) of the Output.

    Parameters

    • dpi: string

      One of ['50', '80', '100', '110', '120', '150', '200', '300']

    Returns Output

setExportFormat

  • Sets the Format of the Output.

    Parameters

    • format: string

      One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]

    Returns Output

setFont

  • 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

    Parameters

    • font: string

      One of ['','jvn','cmb','phv','phn','tx','px','cs']

    Returns Output

setFontSize

  • Sets the font size of the Output.

    Parameters

    • fontSize: string

    Returns Output

setFormat

  • 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?'

    Parameters

    • format: string

      One of ['gif', 'pdf', 'png', 'svg', 'emf']

    Returns Output

setInline

  • Sets the Inline mode of the Output.

    Parameters

    • flag: boolean = true

      Value to set inline mode.

    Returns Output

setRenderURL

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

    Parameters

    • renderURL: string

      URL formatted for CodeCogs equation renderer

    Returns Output

updateOutput

  • Trigger the updating of the Output to reflect any changes.

    Returns void

Static link

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

    Parameters

    • divOutputId: string = null

      The Div Id that the Output class will render

    • outputFormat: string = null

      One of [wp, phpBB, tw, url, urlencoded, pre, doxygen, html, latex]

    Returns Output

Toolbar

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.

constructor

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

    Parameters

    • toolbarElementId: string

      Id of the the layer into which the toolbar is placed

    Returns Toolbar

addTextArea

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

    Parameters

    • textArea: TextArea

      The TextArea object to associate with the Toolbar.

    • reverseLink: boolean = true

      If true it also adds the Toolbar to the TextArea.

    Returns Toolbar

getIconsPanels

  • Returns the Icons of each Panel.

    Returns any

getPanel

  • Returns the HTMLDivElement for a equation editor toolbar panel based on its name.

    Parameters

    • panelName: string

      The name of the panel to retrieve

    Returns HTMLDivElement

getToolbars

  • Returns the Toolbars.

    Returns any

moveTo

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

    Parameters

    • toolbarElementId: string

      Id of the the layer into which the toolbar is to be moved

    Returns Toolbar

setActiveTextArea

  • Sets the specified TextArea as the current active one.

    Returns the current Toolbar object.

    Parameters

    • textArea: TextArea

      The TextArea to make active

    Returns Toolbar

Static link

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

    Parameters

    • toolbarElementId: string

      Id of the the layer into which the toolbar is placed

    Returns Toolbar

Parameter Details

The equation editor uses some specific parameter values to modify the behaviour of certain functions. Below are the

exportType

Used throughout the Output Class to determine which format to render the equations in.

latexRaw LaTeX markup1+sin(x)
encodedEncoded LaTeX markup1&plus;%20sin(x) - Uses the javascript escape function and converts '+' rto &plus;
wpWordpress markup[latex]1+sin(x)[/latex]
phpBBphpBB markup[tex]1+sin(x)[/tex]
twTiddly Wiki[img[http://latex.codecogs.com/gif.latex?1+sin(x)]]
urlURL link to equationhttp://latex.codecogs.com/gif.latex?1&plus;sin(x)
urlencodedEncoded URL link to equationhttp://latex.codecogs.com/gif.latex?1&plus;sin%28x%29
preHTML code using pre-tags<pre xml:lang="latex">1+sin(x)</pre>
doxygenDOxygen markup\f[1+sin(x)\f]
htmlHTML code for use on a webpage<img src="latex.codecogs.com?gif.latex=1+sin(x)" />

dpi

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.

50Lowest Resolution
80
100
110
120
150
200
300Highest Resolution
Copied to clipboard