Editor Embedding

The page illustrates a range of approaches for incorporate the CodeCogs Equation Editor directly within your websites. The examples below are all take from real-life examples we have developed with users.

To keep the code as clean as possible many of the example lack styling and layout that you might otherwise want to incorporate into your page.

Popup Overlay

A nice way to integrate the Latex Editor into a website is with a popup layer that contains the editor.

Add to <head> :

<script src="https://latex.codecogs.com/editor.js"></script>

Add to <body> :

<p>A text link: <a href="javascript:OpenLatexEditor('testbox','html','')">
  Launch CodeCogs Equation Editor</a></p>

<p>A button: <button onclick="javascript: OpenLatexEditor('testbox','html','')">
  Launch Equation Editor</button></p>

<textarea id="testbox" rows="6" cols="60"></textarea>

Which creates :

Download Example

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

<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">
    EqEditor.TextArea.link('latexInput')
        .addToolbar(new EqEditor.Toolbar('toolbar'), true)
        .addOutput(new EqEditor.Output('output'));
</script>

Which creates:

Download Example

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="toolbar"></div>

<label for="textbox1">Input 1:</label>
<div class="input" id="testbox1" autocorrect="off">2+sin(x)</div>
<img id="equation1">
<br/>
<label for="export1">Export 1:</label>
<span id="export1"></span>
<br/>
<label for="textbox2">Input 2:</label>
<div class="input" id="testbox2" autocorrect="off">1+sin(x)</div>
<img id="equation2">

<script type="text/javascript">
    toolbar = new EqEditor.Toolbar('toolbar')
    textarea1 = EqEditor.TextArea.link('testbox1')
        .addToolbar(toolbar, true)
        .addOutput(EqEditor.Output.link('equation1')
            .setFormat('png') )
        .addOutput(EqEditor.Output.link('export1')
            .setExportFormat('url') );

    textarea2 = EqEditor.TextArea.link('testbox2');
        .addToolbar(toolbar, true)
        .addOutput(new EqEditor.Output('equation2'));
</script>

Which creates :

Download Example

Moving Toolbar

The following example demonstrates the use of .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>
    toolbar = new EqEditor.Toolbar('editor1')

    EqEditor.TextArea.link('entry_1', true)
        .addOutput(new EqEditor.Output('equation1'))
        .addToolbar(toolbar, true);

    EqEditor.TextArea.link('entry_2')
        .addOutput(new EqEditor.Output('equation2'))
        .addToolbar(toolbar, false);

    EqEditor.TextArea.link('entry_3')
        .addOutput(new EqEditor.Output('equation3'))
        .addToolbar(toolbar, false);
</script>

Which creates :

Download Example

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="https://latex.codecogs.com/js/eqneditor.api.min.js" 
    crossorigin="anonymous"></script>

Add to <body> :

<button id="loadeqneditor" onclick="toolbar = new EqEditor.Toolbar('editor'); 
    textarea = new EqEditor.TextArea('entry'); 
    textarea1.addOutput(new EqEditor.Output('equation')).addToolbar(toolbar, true);">
Load Equation Editor</button>
<div id="editor"></div>
<div class="input" id="entry"></div>
<p><img id="equation"></p>

Which creates :

Download Example