:: Table of Contents

fxEditor Deployment

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.

Every example starts the same way. The editor is loaded from fxeditor.codecogs.com and activated once per page with your licence key, by EqEditor.init(); anything that shows an equation is built once that has finished, inside ready.then(…). Most examples edit in a MathView, where the equation is typed and shown as the maths itself; Restricted Variables pairs one with the LaTeX it is made from. Replace fx_pk_your-key-here with the key from your licence manager. See Activating with a licence key.

Popup Overlay

A nice way to integrate the equation editor into a website is with a popup layer that contains the editor. The editor is built the first time the popup opens, starts from the LaTeX in your own field, and copies the equation back with getLatex() when it closes.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

<button id="open">Launch Equation Editor</button>
<textarea id="testbox" rows="6" cols="60"></textarea>

<div id="popup-overlay" style="display:none">
  <div id="toolbar"></div>
  <div id="mathview"></div>
  <button id="save">Save</button>
</div>

<script>
    let mathview = null;
    const popup = document.getElementById('popup-overlay');

    document.getElementById('open').addEventListener('click', () => {
        ready.then(() => {
            if (!mathview) {
                mathview = EqEditor.MathView.link('mathview', true)
                    .addToolbar(new EqEditor.Toolbar('toolbar'), true);
            }
            mathview.setLatex(document.getElementById('testbox').value);
            popup.style.display = 'block';
        });
    });

    document.getElementById('save').addEventListener('click', () => {
        popup.style.display = 'none';
        document.getElementById('testbox').value = mathview.getLatex();
    });
</script>

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://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

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

<script type="text/javascript">
    ready.then(() => {
        EqEditor.MathView.link('mathview')
            .addToolbar(new EqEditor.Toolbar('toolbar'), true)
            .setLatex('2+\\sin(x)');
    });
</script>

Which creates:

Download Example

Multiple Inputs

Extending the previous example (use the same <head> elements), two MathViews are connected to one toolbar. Whichever one is active will receive the input from the toolbar, and getLatex() reads each equation back when you need it.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

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

<label>Input 1:</label>
<div class="input" id="mathview1"></div>
<label>Input 2:</label>
<div class="input" id="mathview2"></div>

<script type="text/javascript">
    ready.then(() => {
        const toolbar = new EqEditor.Toolbar('toolbar');

        const mathview1 = EqEditor.MathView.link('mathview1')
            .addToolbar(toolbar, true);
        mathview1.setLatex('2+\\sin(x)');

        const mathview2 = EqEditor.MathView.link('mathview2')
            .addToolbar(toolbar, false);
        mathview2.setLatex('1+\\sin(x)');
    });
</script>

Which creates :

Download Example

Moving Toolbar

The following example demonstrates the use of toolbar.moveTo() to move the editor toolbar to whichever question is being answered.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

<form name="answerform">
  <h3>Question 1</h3>
  <div id="editor1"></div>
  <div class="input" id="entry_1" onclick="toolbar.moveTo('editor1')"></div>

  <h3>Question 2</h3>
  <div id="editor2"></div>
  <div class="input" id="entry_2" onclick="toolbar.moveTo('editor2')"></div>

  <h3>Question 3</h3>
  <div id="editor3"></div>
  <div class="input" id="entry_3" onclick="toolbar.moveTo('editor3')"></div>
</form>

<script>
    let toolbar;
    ready.then(() => {
        toolbar = new EqEditor.Toolbar('editor1');

        EqEditor.MathView.link('entry_1', true).addToolbar(toolbar, true);
        EqEditor.MathView.link('entry_2').addToolbar(toolbar, false);
        EqEditor.MathView.link('entry_3').addToolbar(toolbar, false);
    });
</script>

Which creates :

Download Example

On Demand

This example demonstrates the equation editor can be loaded on demand, in response to a button press.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

<button id="loadeqneditor" onclick="ready.then(() => {
    EqEditor.MathView.link('entry', true)
        .addToolbar(new EqEditor.Toolbar('editor'), true); });">Load Equation Editor
</button>
<div id="editor"></div>
<div class="input" id="entry"></div>

Which creates :

Download Example

Restricted Variables

This example demonstrates how the variables and commands that may be used within the editor can be restricted to a specified list or pattern. It shows the LaTeX and the MathView together: the restrictions are set on the LaTeX, where anything not allowed is marked, and the two views hold the same equation, so an edit in either shows in the other.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

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

<script>
    ready.then(() => {
        const textarea = EqEditor.TextArea.link('latexInput', true)
            .addRestrictedVariables(['bill', 'j\\w+s'])
            .addRestrictedCommands(['.*']);

        const mathview = EqEditor.MathView.link('mathview')
            .addTextArea(textarea);

        EqEditor.Toolbar.link('toolbar', [["operators", "matrix"]])
            .addTextArea(textarea)
            .addMathView(mathview);
    });
</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 to extend the toolbar with panels of your own. A panel is written in the same JSON format as the built-in ones: a label, the size of each button, how many rows to fill, and the buttons themselves, either as a string of LaTeX or as an object whose insert and face say what the button inserts and what it shows. Four different approaches are demonstrated:

Adding an existing panel, by name
Adding text variables, which insert the text they display
Adding LaTeX commands with a class of their own, styled green by the page's CSS: #toolbar .green { color: green; }
Adding bespoke buttons, in which what is inserted and what is drawn are defined separately.

See the API reference for every property a panel and a button may take.

Add to <head> :

<script src="https://fxeditor.codecogs.com/eqneditor.api.min.js" 
crossorigin="anonymous"></script>
<script>
    // Your licence key, from the licence manager - once per page.
    const ready = EqEditor.init({ licence: 'fx_pk_your-key-here' });
</script>

Add to <body> :

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

<script>
    ready.then(() => {
        const mathview = EqEditor.MathView.link('mathview', true);

        EqEditor.Toolbar.link('toolbar', [["operators"]])
            .addMathView(mathview)
            .appendPanel(0, "matrix")
            .appendPanel(0, {
                "label": "Variables",
                "button": { "width": 36, "height": 20 },
                "rows": 3,
                "buttons": [ "bill", "jill", "jack" ]
            })
            .appendPanel(0, {
                "label": "Greek",
                "class": "green",
                "button": { "width": 18, "height": 20 },
                "rows": 3,
                "buttons": [ "\\alpha", "\\beta", "\\gamma" ]
            })
            .appendPanel(0, {
                "label": "Accents",
                "button": { "width": 18, "height": 20 },
                "rows": 3,
                "buttons": [
                    { "insert": "\\dot{}", "face": "\\dot{a}" },
                    { "insert": "\\hat{}", "face": "\\hat{a}" },
                    { "insert": "\\vec{}", "face": "\\vec{a}" }
                ]
            });
    });
</script>

Which creates :

Download Example

API reference — the options behind each of the examples above.

Design — trimming the toolbar to the panels your users actually need.

Plugins — if your site already has a rich-text editor, CMS or learning platform, start here instead.

Copied to clipboard

FxEditor

FxTeX

FxTeX Server

Plugins

Licensing

fxEditor Deployment

Integrated

Multiple Inputs

Moving Toolbar

On Demand

Restricted Variables

Extending Toolbar

More