Developer Guide

If you are using another text editor that we don't have an integration for yet, follow this guide.

Setup

Load the Equation Editor API source code before, or at the very start of your plugin initialisation code from https://editor.codecogs.com/eqneditor.api.min.js.
Load the Equation Editor CSS at some point before you will display the equation editor from https://editor.codecogs.com/eqneditor.css.

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 immediately after the canvas created above gets loaded up, so that the HTML elements referenced exist when the script gets run.

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, the following pseudocode should be implemented :

var content = output.exportAs('html');
// IMPLEMENT: Insert 'content' at cursor position in HTML editor
textarea.pushToHistory();
// IMPLEMENT: Close equation editor canvas

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
if (e.target.nodeName.toLowerCase() == "img") {
    var sName = e.target.src.match( /(gif|svg)\.image\?(.*)/ );
    if(sName!=null) showCanvas(sName[2]);
}