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

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/eqneditor-tinymce6

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/eqneditor-tinymce6/eqneditor.js"></script>
<script>
  tinymce.init({
    selector: '#mytextarea',
    plugins: 'eqneditor',
    toolbar: 'eqneditor',

    eqneditor_server: 'fxeditor.codecogs.com',
    eqneditor_licence: 'fx_pk_your-key-here'    // from the licence manager
  });
</script>

Without npm

Download the plugin, unzip it, and load eqneditor.js after TinyMCE exactly as above. The zip includes an example page; the script is the only file you need.

Download the TinyMCE plugin

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.

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="https://fxtex.codecogs.com/fxtex.css">

Configuration

eqneditor_licence		Your fxEditor licence key. Required.
eqneditor_server	'fxeditor.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.

Copied to clipboard

FxEditor

FxTeX

FxTeX Server

Plugins

Licensing