If your site already has a rich-text editor, a CMS or a learning platform, you do not need to
build an equation editor into it yourself. Each plugin below adds an fx button
that opens fxEditor
and puts the finished equation into the document. Every plugin's page has it running live, a
customiser for its design, a download, and the complete code.
Released plugins are published and supported. Preview
plugins are new: they work, but have not yet been through a full release on their platform, and
each page says what has been tested. Legacy plugins are for older editor
versions, kept for sites that still run them.
Your platform is not listed? Every plugin is built on the same public API, and
Writing your own shows how. Or
ask us.
What every plugin shares
A licence key
The equation editor is activated with your fxEditor licence key, the same
one you would pass to EqEditor.init()
directly. Each plugin has an option for it, and one for its design — the names differ only
to follow each platform's own conventions:
Plugin
Licence option
Design option
CKEditor 5
eqnEditor: { licence: '…' }
eqnEditor: { design: {…} }
CKEditor 4
config.eqneditor_licence
config.eqneditor_design
TinyMCE 4, 6 and 7
eqneditor_licence
eqneditor_design
Froala
eqneditorLicence
eqneditorDesign
Tiptap
EqnEditor.configure({ licence: '…' })
EqnEditor.configure({ design: {…} })
WordPress
window.eqneditorLicence
window.eqneditorDesign
Moodle
Licence key, in the plugin's site settings
Design, the same settings, as JSON
Google Docs and Slides
Script property EQNEDITOR_LICENCE
Script property EQNEDITOR_DESIGN, as JSON
LTI 1.3
Environment variable EQNEDITOR_LICENCE
Environment variable EQNEDITOR_DESIGN, as JSON
TiddlyWiki
Tiddler $:/config/codecogs/eqneditor/Licence
Tiddler $:/config/codecogs/eqneditor/Design, as JSON
Your key is in the licence manager. Without one, equations show the reason
they cannot render in place of the maths.
A design
Each plugin also takes a design — the dialog's width, height and scale, the toolbar's panels and size,
the colour, the size of equations and markup, whether undo/redo shows and how the dialog opens. It is the same
object on every platform, under that platform's own option name, and each plugin's page has a
Customise and download section that builds it for you:
{
toolbar: [ [ 'greeklower', 'greekupper', 'relations' ], [ 'operators', 'brackets' ] ],
toolbarScale: 1.2, // the toolbar's size, 1 is normal
width: 960, // the dialog's width, in px - its contents reflow to fit
height: 640, // the dialog's height, in px - the editing area grows to fit
dialogSize: 1.25, // scales the whole dialog, box and contents together; 1 is normal
history: false, // hide undo/redo
latex: true, // open with the LaTeX markup showing
insertAs: 'svg', // the dialog's starting "Insert as"
colour: '#0f7a4d', // the accent colour
mathSize: 26, // the equation, in px
latexSize: 18, // the LaTeX markup, in px
sizeControl: true, // a Size control in the dialog, to scale one equation against the rest
predictor: true, // suggested equations in a panel beside the editing area, as you type
predictorShow: 'both' // what each suggestion shows: 'mathml' (the default), 'latex' or 'both'
}
Leave out anything you do not want to change. toolbar: false hides the toolbar
altogether.
Where the editor comes from
Plugins are small. The equation editor itself — its script, stylesheet and fonts —
is loaded from fxtex.codecogs.com when it is first needed, along with
fxTeX Pro, which your licence key unlocks, so you always have the current
version without rebuilding. Each plugin has a server option to load it from somewhere
else, and a render URL option naming the
fxTeX Server that draws equations
inserted as images — change it to use a
self-hosted one.
MathML or an image
Most plugins let the author choose, in the equation dialog, how each equation is inserted:
MathML, the default: the mathematics itself, with its spoken
form attached for screen readers. It needs nothing from us when the page is read, and scales and
reflows with the text around it.
An SVG image, drawn by fxTeX Server, with the LaTeX as its
alt text. It shows anywhere a picture can, but every view of the page is a request
to the rendering service.
Either way the LaTeX travels with the equation, so it can be reopened and edited later.
A stylesheet for published MathML
The plugins style MathML inside the editor for you. The page that finally shows your content
needs one line to do the same:
CodeCogs®
