:: Table of Contents

TinyMCE 6 and 7

The fxEditor plugin for TinyMCE adds an fx button to the toolbar that opens the equation editor in a dialog, and inserts the result into your document. It is a single script with no build step. Try it:

Open the example on its own ↗

Usage

Click fx on the toolbar to open the equation editor.
Build the equation in the maths view. The LaTeX toggle, bottom left, shows the LaTeX markup alongside it; the two stay in step as you edit either.
Choose how it is inserted from the dropdown beside the toggles, then insert it.
Double-click an existing equation to edit it again.

Moodle's editor is TinyMCE too — for Moodle, use the Moodle plugin, which wraps this one.

Installation

With npm

npm install @codecogs/fxeditor-tinymce

Load the plugin after TinyMCE, and name eqneditor in both plugins and toolbar:

<script src="node_modules/tinymce/tinymce.min.js"></script>
<script src="node_modules/@codecogs/fxeditor-tinymce/eqneditor.js"></script>
<script>
  tinymce.init({
    selector: '#mytextarea',
    plugins: 'eqneditor',
    toolbar: 'eqneditor',

    eqneditor_server: 'fxtex.codecogs.com',
    eqneditor_licence: 'fx_pk_your-key-here',   // from the licence manager
    eqneditor_design: { colour: '#0f7a4d' }     // optional - see Customise and download below
  });
</script>

Without npm

Load the plugin straight from this site, after TinyMCE, exactly as above:

<script src="https://fxplugins.codecogs.com/tinymce/v6/eqneditor.js"></script>

Or download it from Customise and download below, which also gives you an example page, to host it yourself. The script is the only file you need.

The licence key activates the equation editor for your domain. Without it, equations show the reason they cannot render in place of the maths. See Activating with a licence key.

Using Angular? See Angular for where these lines go.

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 TinyMCE 6 and 7 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 TinyMCE 6 and 7 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 TinyMCE 6 and 7 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.)

What gets written into the page

The author chooses, from the dropdown in the equation dialog:

Insert as	What lands in the document
MathML (default)	The mathematics itself, with its spoken text attached for screen readers. Nothing to fetch when the page is viewed; it selects, scales and reflows with the surrounding text.
Image (SVG)	An `<img>` that fxTeX Server renders, with the LaTeX as its `alt` text. Displays anywhere a picture can, but every view of the page is a request to the rendering service.

Both carry the LaTeX they were written from, so either can be reopened by double-clicking it. The plugin teaches TinyMCE to keep MathML, so there is no valid_elements list for you to maintain.

MathML needs a stylesheet on the page that displays it. The plugin loads it into the editing view for you. On the page that finally shows your content, add:

<link rel="stylesheet" href="/api/browser/proxy?url=https%3A%2F%2Ffxtex.codecogs.com%2Ffxtex.css">

Configuration

eqneditor_licence		Your fxEditor licence key. Required.
eqneditor_design		The editor's look: 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; see A design.
eqneditor_server	'fxtex.codecogs.com'	Host the equation editor's own code is loaded from. A bare host means `https`; a full origin is used as it is.
eqneditor_render_url	'https://fxtex.codecogs.com'	The rendering service for equations inserted as images. Point it at a self-hosted fxTeX Server to keep equations inside your network.
eqneditor_script_url	from server	Full URL of the equation editor bundle.
eqneditor_css_url	from server	Full URL of the equation editor stylesheet.
eqneditor_mathml_css_url	from server	The MathML stylesheet loaded into the editing view.

Upgrading. eqneditor_insert_as and eqneditor_show_latex are no longer read: the author chooses MathML or an image in the dialog itself, and shows or hides the LaTeX with its toggle.

Change History

v2.2 and earlier - For TinyMCE 4 (and, before that, TinyMCE 3).
v3 - Adds compatibility for TinyMCE 6.
npm package 2.1 - Supports TinyMCE 6 and 7. Adds the WYSIWYG maths view, inserts MathML by default with SVG images as the alternative, and is activated with an fxEditor licence key.
npm package 2.2 - Published as @codecogs/fxeditor-tinymce. Adds the design option.

Copied to clipboard

Plugins

HTML editors

CMS and LMS

Other

Developers