LIBRARY

PRODUCTS

FORUMS

CART

Join CodeCogs

Or login with:

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

Products » Equation Editor »

Embedded Installation

The CodeCogs Equation Editor can be customised and embedded into any HTML page using a few simple Javascript calls. This provides a seamless experience for your users, giving them easy access to the toolbar exactly when they need it.

Prerequisites

The following must be included in the HTML 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-11.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.

For example:

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

<script type="text/javascript">
  EqEditor.embed('editor')
  var a=new EqTextArea('equation', 'testbox');
  EqEditor.add(a,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 styles you might want to override are:

  #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; }

moving toolbar example

Moving the 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. The following code illustrates how you might add a second <textarea> which, when selected, moves the toolbar above it:

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

Interface

EqEditor.embed(divID, SID,
design, language)
EqEditor.add(EqTextArea, resize)
EqEditor.addText(document, buttonID, text)
EqEditor.setFormat(format)
EqTextArea(imageID, textareaID)
EqTextArea.set(imageID, textareaID)
EqTextArea.addExportArea(
textareaID, type)
ExportButton.add(EqTextArea,
buttonID, fn, type)

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

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.

EqTextArea(imageID, textareaID)

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.

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.

Adding a second text area

example 2

The HTML page can have multiple input areas driven by one toolbar. After defining each additional <textarea>, associate each one with the toolbar using EqEditor.add(...). For example:

<div id="editor"></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('editor');
  var a=new EqTextArea('equation', 'testbox');
  EqEditor.add(a,false);   

  var b=new EqTextArea('equation2', 'testbox2');   
  EqEditor.add(b,false);
</script>

to create:

Exporting Equations

example 3

The EqTextArea object can also be linked to other elements to format the LaTeX equation in various ways. This is typically used to export the equaton into other systems; perhaps another HTML page. For example:

<div id="editor"></div>
<textarea id="testbox" rows="3" cols="40"></textarea>
<img id="equation" />

<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('editor'); 	
  var a=new EqTextArea('equation', 'testbox');
  EqEditor.add(a,false);

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

</script>

to create (remember to enter an equation above to see it below):

HTML:

HTML Edit:

Tidly Wiki:

URL:

EqTextArea.addExportArea(ID, type)

Use these to associate additional regions with a single <textarea>, enabling a LaTeX equation to be displayed or formated in various other ways.

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 (as above).

Export Buttons

example 4

For more control, the Export Buttons function allows a javascript function to be called with the content of an input area. As this would usually be used to insert an equation into another HTML editor (perhaps FCKEditor etc), this response is always triggered by a button. The javascript function gives you unlimited control over what you do with the equation. For example:

<div id="editor"></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('editor','');
  var a=new EqTextArea('equation', 'testbox');
  EqEditor.add(a,false);

  EqnExport=function(text) { EqEditor.addText(document, 'buttonexport', text); };
  ExportButton.add(a, 'copybutton', EqnExport, 'html');

  EqnExport2=function(text) { alert(text); };
  ExportButton.add(a, 'copybutton2', EqnExport2, 'html');
</script>

creates:

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: javascript function called when button is pressed.

Page Comments

You must login to leave a messge