:: Table of Contents

Editor Installation

The page illustrates some quick ways to start using the CodeCogs Equation Editor within your websites. The examples below are all take from real-life examples that we've developed with users over the last 15 years.

Integrated

To enhance the user experience, the editor can be embedded directly within the webpage. In addition to selecting the editor toolbar panels, this approach allow the arrangement of the editor within your page to be completely customised.

This following example illustrates the simplest implementation: you would normally add additional css styling to position elements.

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>

Add to <body> :

<div id="editor"></div>
<br/>
<textarea id="testbox" rows="3" cols="40"></textarea>
<img id="equation"/>
<script>
  EqEditor.embed('editor','');
  EqEditor.add(new EqTextArea('equation', 'testbox'),false);
</script>

Which creates :

Multiple Inputs

Extending the previous example (use the same <head> elements), two input, a <input> and <textarea>, are connected to one toolbar. Whichever input field is active will receive the input from the toolbar.

Also added is ExportArea below the first input, which can be used to represent the equation in a various form for inclusion in other websites. Here we provide a standard url that allows the equation to be loaded directly using your web browser. See API for more options.

Add to <body> :

<div id="editor"></div>
<br/>
<label for="textbox1">Input 1:</label>
<input id="testbox1"/>
<img id="equation1"/>
<br/>
<label for="export1">Export 1:</label>
<span id="export1"></span>
<br/><br/>

<label for="textbox2">Input 2:</label>
<textarea id="testbox2" rows="3" cols="40"></textarea>
<img id="equation2"/>

<script type="text/javascript">
    EqEditor.embed('editor','');
    var a=new EqTextArea('equation1', 'testbox1');
    EqEditor.add(a,false);
    a.addExportArea('export1','url');

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

Which creates :

Moving Toolbar

The following example demonstrates the use of EqEditor.moveto() to move the editor toolbar between active inputs.

Add to <body> :

<form name="answerform">
  <h3>Question 1</h3>
  <div id="editor1"></div>
  <textarea name="entry_1" id="entry_1" onClick="EqEditor.moveto('editor1')"></textarea>
  <p><img id="equation1"/></p>

  <h3>Question 2</h3>
  <div id="editor2"></div>
  <textarea name="entry_2" id="entry_2" onClick="EqEditor.moveto('editor2')"></textarea>
  <p><img id="equation2"/></p>

  <h3>Question 3</h3>
  <div id="editor3"></div>
  <textarea name="entry_3" id="entry_3" onClick="EqEditor.moveto('editor3')"></textarea>
  <p><img id="equation3"/></p>
</form>

<script>
  EqEditor.embed('editor1','things','mini','en-us');
  var a=new EqTextArea('equation1', 'entry_1');
  var b=new EqTextArea('equation2', 'entry_2');
  var c=new EqTextArea('equation3', 'entry_3');
  EqEditor.add(a,false);
  EqEditor.add(b,false);
  EqEditor.add(c,false);
</script>

Which creates :

On Demand

This example demonstrates the equation editor toolbar can be loaded on demand, in response to a button press. For simplicity the jQuery library is used to manage the button action.

Add to <head> :

<script src="/assets/vendor/js/jquery/jquery-3.4.0.min.js"></script>
<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>

Add to <body> :

<button id="loadeqneditor">Load Equation Editor</button>
<div id="toolbar"></div>
<textarea id="latexInput"></textarea>
<img id="equation" />

<script type="text/javascript">
  $(document).ready(function() {
    $('#loadeqneditor').click(function(){
      EqEditor.embed('toolbar','','mini','en-us');
      EqEditor.add(new EqTextArea('equation', 'latexInput'),false);
    });
   });
</script>

Which creates :

Third Party:

A sample of third party examples that have integrated the CodeCogs Equation Editor within their. Please note that CodeCogs is not responsible for third-party content.

Copied to clipboard