:: Table of Contents

Moodle

The fxEditor plugin for Moodle 4.1 and later adds an Equation button to Moodle's TinyMCE editor — so anywhere a teacher or student can type, in a quiz, a forum post, a page or an assignment, they can write an equation. This is the editor it adds, running here with Moodle's own modules stood in for:

Open the example on its own ↗

Preview. The plugin follows Moodle's editor_tiny plugin API and its dialog has been tested in a browser, but it has not yet been installed on a range of live Moodle sites. Try it on a test site first. The plugin is the tiny_eqneditor folder in the download in Customise and download below.

Installation

Copy the plugin's folder, tiny_eqneditor from the download below, to <moodle>/lib/editor/tiny/plugins/eqneditor.

Build its JavaScript, as for any Tiny plugin:

cd <moodle>
npx grunt amd --root=lib/editor/tiny/plugins/eqneditor

Visit Site administration → Notifications to complete the install.
Under Site administration → Plugins → Text editors → TinyMCE editor → General, add Equation to the toolbar.
Under … TinyMCE editor → CodeCogs Equation Editor, enter your licence key, and paste your design — design.json in the download — into Design.

Settings

Site-wide, under Site administration → Plugins → Text editors → TinyMCE editor → CodeCogs Equation Editor:

Licence key	Your fxEditor licence key. Required. It is sent to every browser that opens the editor, and works only on the domain it was issued for.
Design	The editor's look, as JSON: dialog width, height and scale, toolbar panels and size, colour, equation and markup sizes, undo/redo, how the dialog opens. Build one in Customise and download. Empty for the standard design.
Equation Editor host	Where the equation editor is loaded from: `fxtex.codecogs.com`.
Rendering service URL	The fxTeX Server that draws equations inserted as images: `https://fxtex.codecogs.com`, or your own.
Insert as	The starting choice in the dialog, which authors can change for each equation: an image, LaTeX text, or MathML.

Customise and download

Make the equation editor your own: choose what it shows, drag panels from More panels into up to three toolbar rows, and pick a colour and sizes. The preview is the real Moodle page, rebuilt as you go. Then add your licence key and download it: an example.html with a page of equations to edit, loading everything it needs from fxplugins.codecogs.com.

Show Toolbar Undo / redo LaTeX first Size control Predictor Insert as

Colour

More panels 0

Dialog Width Auto Height Auto Scale 100%

Toolbar Size 100%

Text Equation 22px Markup 16px

Preview

Your design

The option that gives Moodle this design — it is already in the download. Leave it out and the editor uses the standard design.

Your licence key

Your key is in the licence manager on fxEditor — or get one. Without a key, the download still works: equations show why they cannot render until you add one.

Complete example

The whole of the page running above: a simple, complete HTML page that loads Moodle and the plugin. Every file comes from fxplugins.codecogs.com, so it works as it is — put in your own licence key. (Keys are shortened here.)

Choosing how equations are stored

Image — displays anywhere, but needs the rendering service to be reachable whenever the content is viewed.

LaTeX — compact and editable by hand. Moodle displays it through its own MathJax filter, which must be enabled.

MathML — final markup, with nothing to fetch. Pages that display it need the fxtex.css stylesheet: add <link rel="stylesheet" href="https://fxtex.codecogs.com/fxtex.css"> under Site administration → Appearance → Additional HTML → Within HEAD.

For LTI-based tools rather than the text editor, see Canvas, Blackboard and LTI, which also works with Moodle.

Copied to clipboard

Plugins

HTML editors

CMS and LMS

Other

Developers