fxEditor Examples

Integrated

Embed the editor directly in your page to customise its layout and choose which toolbar panels to show.

The following example shows a basic embedded editor. Add CSS to position and style its components.

Add to <head>:

<script src="https://fxeditor.codecogs.com/fxeditor.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>Copy

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

Result:

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/fxeditor.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>Copy

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

Result:

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/fxeditor.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>Copy

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').addToolbar(toolbar, true);
        EqEditor.MathView.link('entry_2').addToolbar(toolbar, false);
        EqEditor.MathView.link('entry_3').addToolbar(toolbar, false);
    });
</script>Copy

Result:

Restricted Variables

Restrict the variables and commands allowed in the editor using a list or pattern. This example shows both the LaTeX and the MathView. Restrictions are applied to the LaTeX, where disallowed entries are marked as errors. Edits in either view update the other.

Add to <head>:

<script src="https://fxeditor.codecogs.com/fxeditor.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>Copy

Add to <body>:

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

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

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

        EqEditor.Toolbar.link('toolbar', [["operators", "matrix"]])
            .addLaTeXView(textarea)
            .addMathView(mathview);
    });
</script>
Copy

Result:

Only bill and words matching j\w+s are allowed. Other words are marked as errors.

Structure Lock

Built for exercises and assessments: you write the structure of an equation, leaving empty slots where the answers go, and lock it. Students can then fill in the slots — and nothing else. They cannot delete or change the structure around the slots, or add any of their own.

Load each equation, then call EqEditor.structural_lock(true) to lock every equation on the page. Each equation keeps its own lock, so several on one page, sharing a toolbar or with no toolbar at all, are each locked to their own structure. A MathView and the LaTeXView linked to it share one lock. To lock a single equation instead, call structural_lock(true) on its MathView or LaTeXView.

• Slots are the parts that are empty when the lock goes on: each empty {} or [], each empty matrix cell, each box drawn after an operator with nothing to operate on, and each empty atom {} in a \chemfig structure. A slot stays editable once something is typed into it.
• A slot takes plain characters and single symbols: letters, digits, + - = . , and the like, and commands such as \alpha, \pi or \le. It does not take braces, brackets, superscripts or subscripts, new rows, or commands that take an argument, such as \frac or \sqrt. Write the structure so that every answer fits one of these: give a power a slot of its own, as in \frac{{}x^{}}{}, rather than expecting a student to type x^3.
• While locked the toolbar and the autosuggest insert only what a slot can take, Tab goes round the slots, the arrow keys move within and between them, and a click on the fixed part of the equation puts the caret in the nearest slot.
• Reading the answers: getAnswers() returns what is in each slot, in the order the slots appear in the LaTeX, with "" for one left empty. getLatex() still returns the whole equation.
• Changing a locked equation: unlock it, make the change, and lock it again. While locked, setLatex() and other changes from your own code are refused too, and locking clears the undo history so the structure cannot be undone away.

Add to <head>:

<script src="https://fxeditor.codecogs.com/fxeditor.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',
        // chemfig, for question 4 - an optional package, off unless named.
        packages: ['chemfig']
    });
</script>Copy

Add to <body>:

<label>1. Solve 2x + 3 = 13:</label>
<div class="input" id="mathview1"></div>

<label>2. Factorise:</label>
<div class="input" id="mathview2"></div>

<label>3. Multiply out:</label>
<div class="input" id="mathview3"></div>

<label>4. Benzoic acid reacts with methanol. Complete the ester they form:</label>
<div class="input" id="mathview4"></div>

<button id="lock">Unlock</button>
<button id="check">Show answers</button>
<div id="answers"></div>

<script>
    let questions = [];

    ready.then(() => {
        const q1 = EqEditor.MathView.link('mathview1');
        q1.setLatex('x={}');

        const q2 = EqEditor.MathView.link('mathview2');
        q2.setLatex('x^2-5x+6=(x-{})(x-{})');

        // Empty matrix cells are slots too.
        const q3 = EqEditor.MathView.link('mathview3');
        q3.setLatex('\\begin{pmatrix}1&2\\\\3&4\\end{pmatrix}\\begin{pmatrix}5\\\\6\\end{pmatrix}'
                  + '=\\begin{pmatrix} \\\\ \\end{pmatrix}');

        // In a chemfig structure, an empty {} is an atom left to fill in.
        const q4 = EqEditor.MathView.link('mathview4');
        q4.setLatex('\\chemfig[atom sep=2em]{*6(-=-=(-C(=[1]O)-[7]OH)-=)}+\\mathrm{CH}_3\\mathrm{OH}\\rightarrow'
                  + '\\chemfig[atom sep=2em]{*6(-=-=(-C(=[1]{})-[7]{}-[1]CH_3)-=)}+\\mathrm{H}_2\\mathrm{O}');

        questions = [q1, q2, q3, q4];

        // Lock every equation on the page: only the empty slots can be edited.
        EqEditor.structural_lock(true);
    });

    document.getElementById('lock').addEventListener('click', function () {
        const on = !questions[0].isStructureLocked();
        EqEditor.structural_lock(on);
        this.textContent = on ? 'Unlock' : 'Lock';
    });

    document.getElementById('check').addEventListener('click', () => {
        document.getElementById('answers').textContent = questions
            .map((q, i) => (i + 1) + '. ' + JSON.stringify(q.getAnswers()))
            .join('\n');
    });
</script>
Copy

Result:

Fill in the slots, then press Show answers: question 2 answered in full gives ["2","3"], and question 4 ["O","O"]. Press Unlock to edit the equations freely.

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/fxeditor.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>Copy

Add to <body>:

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

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

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

Result:

On Demand

Build the editor only when someone wants to edit. Until then the equation sits in an ordinary div on your page, and no toolbar or editor is loaded. Pressing Edit Equation takes the LaTeX out of the div, builds the editor and toolbar in its place, and starts the editor from that equation. On a page with many equations, only the ones being edited cost anything.

Add to <head>:

<script src="https://fxeditor.codecogs.com/fxeditor.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>Copy

Add to <body>:

<button id="loadeqneditor">Edit Equation</button>
<div id="editor"></div>
<div class="input" id="entry">1+\sin x^2</div>

<script>
    document.getElementById('loadeqneditor').addEventListener('click', () => {
        ready.then(() => {
            // Already open: pressing again would add a second editor.
            const toolbar = document.getElementById('editor');
            if (toolbar.classList.contains('CCToolbar')) return;

            // Take the equation out of the div the editor goes into.
            const entry = document.getElementById('entry');
            const latex = entry.textContent;
            entry.textContent = '';

            const mathview = EqEditor.MathView.link('entry', true)
                .addToolbar(new EqEditor.Toolbar('editor'), true);
            mathview.setLatex(latex);
        });
    });
</script>
Copy

Result:

Popup Overlay

Use a popup overlay to open the equation editor without taking up space in your page layout. 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/fxeditor.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>
<style>
/* Defines size and position of popup overlay */
#popup-overlay {
  visibility: hidden;
  position: absolute;
  background: #eee;
  border: 1px solid #666;
  box-shadow: 3px 3px #bbb;
  width: 80%;
  max-width: 730px;
  left: 15%;
  padding: 5px;
}

/* Displays pop-up when "active" class is present */
#popup-overlay.active { visibility: visible; }

#mathview {
  min-height: 60px;
  border: 1px solid #fbfb99;
  background-color: #fff;
  padding: 2px;
}
</style>Copy

Add to <body>:

<!--Creates the popup body-->
<div id="popup-overlay">
    <div id="toolbar"></div>
    <div id="mathview"></div>
    <!--popup's close button-->
    <button id="save">Save</button>
</div>

<!--Content shown when popup is not displayed-->
<button id="open">Open Editor</button>
<br/>
<br/>
<textarea id="testbox" rows="6" cols="60">1+\sin(x)</textarea>

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

    document.getElementById('open').addEventListener('click', () => {
        ready.then(() => {
            // Built the first time the popup opens, then reused.
            if (!mathview) {
                mathview = EqEditor.MathView.link('mathview', true)
                    .addToolbar(new EqEditor.Toolbar('toolbar'), true);
            }
            // Start from whatever is in your own field.
            mathview.setLatex(document.getElementById('testbox').value);
            popup.classList.add('active');
        });
    });

    // Copies the equation back to your own field when the popup closes.
    document.getElementById('save').addEventListener('click', () => {
        popup.classList.remove('active');
        document.getElementById('testbox').value = mathview.getLatex();
    });
</script>Copy

Result:

More

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.