Writing your own plugin

If your editor is not one of the plugins we already have, this guide shows the pieces every one of them is built from. The fxEditor API has the detail.

Setup

1. Load the fxEditor API before, or at the very start of, your plugin's initialisation code, from https://fxtex.codecogs.com/fxeditor.api.min.js.
2. Load its stylesheet before the editor is shown, from https://fxtex.codecogs.com/fxeditor.css, and the MathML stylesheet from https://fxtex.codecogs.com/fxtex.css.
3. Activate it once per page with the site's licence key, and wait for that before building anything that shows an equation. Give your plugin a licence option for the key:

   var ready = EqEditor.init({ licence: options.licence });

   See Activating with a licence key.

Equation Editor Window

Create a popup, modal or dialog to hold the equation editor. Most HTML editors provide a dialog API, either built in or through a plugin. Follow your editor's documentation to create the dialog, then add the following HTML:

<div id="equation-editor">
<div id="history"></div>
<div id="toolbar"></div>
<div id="latexInput" autocorrect="off"></div>
<div id="equation-output">
<img id="output"></div></div>

Add Submit and Cancel buttons if your dialog does not already provide them. Configure the fx toolbar button to open the dialog.

Core Code

Run the following setup after the dialog's HTML elements exist and ready has resolved.

await ready;
var inp = "" // Text to insert into equation editor text area on startup, used for editing existing equations, leave blank for new equations
this.output = new EqEditor.Output('output');
this.textarea = EqEditor.TextArea.link('latexInput')
    .addOutput(this.output)
    .addHistoryMenu(new EqEditor.History('history'));


EqEditor.Toolbar.link('toolbar').addTextArea(this.textarea);

var nodes = document.getElementById('history').childNodes;
for(var i=0; i < nodes.length; i++) { nodes[i].style.padding = 'revert'; }

this.textarea.clear();
this.textarea.insert(inp.replace(/&space;/g, ' '), inp.length);

onSubmit

When the user clicks Submit, export the equation in the format your editor should store — 'mathml' for MathML, or 'html' for an image drawn by fxTeX Server:

var content = output.exportAs('mathml');   // or 'html' for an <img>
// IMPLEMENT: Insert 'content' at cursor position in HTML editor
textarea.pushToHistory();
// IMPLEMENT: Close equation editor canvas

If you store MathML, make sure your editor's content filter lets <math> and its child elements through.

onCancel

When the user clicks Cancel, close the dialog without inserting or updating an equation.

Editing an existing equation

Let users double-click an existing equation to reopen it for editing. Register a dblclick event listener in your HTML editor and use the stored LaTeX to fill the dialog. Replace showCanvas below with your function for opening and filling it:

// 'e' represents the captured event object
var el = e.target.closest('math, img');
if (el && el.nodeName.toLowerCase() == 'math') {
    // MathML carries its LaTeX in its title attribute.
    showCanvas(el.getAttribute('title'));
} else if (el) {
    var sName = el.src.match( /(gif|svg|png)\.(image|latex)\?(.*)/ );
    if (sName != null) showCanvas(decodeURIComponent(sName[3]));
}

A design option

Every plugin here also takes a design — the same object on every platform (see What every plugin shares). Pass its toolbar rows and scale to EqEditor.Toolbar.link(id, design.toolbar || 'default', design.toolbarScale || 1), and apply the rest — colour, sizes, undo/redo, how the dialog opens — to your dialog once it is built. The existing plugins each carry a small applyDesign() that does exactly this; copy it.