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://fxeditor.codecogs.com/eqneditor.api.min.js.
2. Load its stylesheet before the editor is shown, from https://fxeditor.codecogs.com/eqneditor.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

The equation editor is a complex input system, and requires a popup window, modal, dialog, or similar element to be placed inside. Most modern HTML editors have built-in support for these and will provide documentation on how to create, or will have external plugins provide this functionality. Follow the setup guide for any of these canvases provided by your editor, and fill it with the following HTML code :

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

Additionally add a 'submit' and 'cancel' button, these often come preset by the canvas provided by your editor. Configure your canvas so it opens when the user clicks on the 'fx' logo (download here).

Core Code

The following code snippet is the most basic setup of the Equation Editor inside a plugin. It should be executed once the canvas created above is loaded, so that the HTML elements it references exist, and once 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 the 'submit' button in the equation editor canvas, insert the equation in the form your editor should store it — '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 the 'cancel' button in the equation editor canvas, the equation editor canvas needs to be closed

dblClick event

It is helpful to give users the option to edit their equations so they don't need to start from scratch after making a mistake. Most HTML editors give you the chance to add custom event listeners for typical Javascript events. The most intuitive 'edit' motion is a double click on the produced equation, which should open the editor again with the user's equation pre-filled. Add the following into your editor code inside an event listener for 'dblClick' (replace 'showCanvas' with your function to open and fill your canvas) :

// '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]));
}