:: Table of Contents

Usage

Plugins

LaTeX IT CK Editor v5 Tiny MCE v6 Blogger Angular Developer Guide

Editor Integration

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

Add to <body> :

<div id="toolbar"></div>
<div id="latexInput">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 <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

Add to <body> :

<div id="toolbar"></div>

<label for="textbox1">Input 1:</label>
<div class="input" id="testbox1">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">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 <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

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

Add to <body> :

<button id="loadeqneditor" onclick="toolbar = new EqEditor.Toolbar('editor'); 
   textarea1 = EqEditor.TextArea.link('entry')
   .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

Restricted Variables

This example demonstrates how the variables and commands that may be use within the editor can be restricted to a specified list or pattern

Add to <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

Add to <body> :

<div id="toolbar"></div>
<div id="latexInput"></div>
<img id="output"/>

<script>
    textarea = EqEditor.TextArea.link('latexInput',true)
        .addOutput(new EqEditor.Output('output'))
        .addRestrictedVariables(['bill','j\\w+s'])
        .addRestrictedCommands(['.*']);

    EqEditor.Toolbar.link('toolbar','[["operators","matrix"]]')
        .addTextArea(textarea);
</script>

Which creates :

Any words other than 'bill' and those that start with 'j' and end in 's' will be displayed as an error.

Download Example

Extending Toolbar

This example demonstrates how extend the toolbar with either custom text commands or icons. Four different approaches are demonstrated:

Adding an existing panel
Adding text variables, which insert the text they display
Adding latex commands with a custom green class
Adding bespoke commands, in which the size and inserted command are seperately defined.

Add to <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>

Add to <head> :

<script src="https://editor.codecogs.com/eqneditor.api.min.js" 
    crossorigin="anonymous"></script>

Add to <body> :

<div id="toolbar"></div>
<div id="latexInput"></div>
<img id="output"/>

<script>
    textarea = EqEditor.TextArea.link('latexInput',true)
        .addOutput(new EqEditor.Output('output'))

    EqEditor.Toolbar.link('toolbar','[["operators"]]')
        .addTextArea(textarea)
        .appendPanel(0,"matrix")
        .appendPanel(0,{
            "name":"textvariables",
            "width":40,
            "buttons":[
                {"latex":"bill"},
                {"latex":"jill"},
                {"latex":"jack"}
            ]
        })
        .appendPanel(0,{
            "name":"textcommands",
            "class":"green",
            "width":20,
            "buttons":[
                {"latex":"\\alpha"},
                {"latex":"\\beta"},
                {"latex":"\\gamma"}
            ]
        })
        .appendPanel(0,{
            "name":"customcommands",
            "width":25,
            "buttons":[
                {
                    "latex": "\\mp",
                    "width": 15,
                    "operation": "insert",
                    "args": ["\\mp"],
                },
                {
                    "latex": "\\alpha",
                    "width": 15,
                    "operation": "insert",
                    "args": ["\\alpha"],
                }
            ]
        });
</script>

Which creates :

Download Example