:: Table of Contents

Froala

The fxEditor plugin for Froala versions 3 and 4 adds an eqneditor toolbar button that opens the equation editor in a dialog, and inserts the result at the cursor. It is a single script and stylesheet, with no build step. Try it — click an equation to edit it:

Open the example on its own ↗

Preview. This plugin is new and not yet on npm as @codecogs/fxeditor-froala. Until it is, load it from this site, or take it from the download in Customise and download.

Installation

From this site, after Froala's own files:

<link rel="stylesheet" href="https://fxplugins.codecogs.com/froala/eqneditor.css">
<script src="https://fxplugins.codecogs.com/froala/eqneditor.js"></script>

Or, once it is published, from npm:

npm install @codecogs/fxeditor-froala

Load the plugin's script and stylesheet after Froala's own, then add eqneditor to the toolbar and give it your licence key:

<link rel="stylesheet" href="node_modules/@codecogs/fxeditor-froala/eqneditor.css">
<script src="node_modules/@codecogs/fxeditor-froala/eqneditor.js"></script>

<script>
  new FroalaEditor('#editor', {
    toolbarButtons: ['bold', 'italic', '|', 'eqneditor'],

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

Click an equation already in the document to edit it again.

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 Froala 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 Froala 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 Froala 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 inserted

The author chooses in the dialog: MathML (the default) or an SVG image drawn by fxTeX Server. See What every plugin shares for the difference, and for the one stylesheet a page showing MathML needs.

Configuration

eqneditorLicence	Your fxEditor licence key. Required.
eqneditorDesign	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.
eqneditorServer	Host the equation editor is loaded from: `'fxtex.codecogs.com'`.
eqneditorRenderUrl	The fxTeX Server that draws equations inserted as images: `'https://fxtex.codecogs.com'`, or your own.
eqneditorScriptUrl	Full URL of the equation editor bundle, when the default path does not suit.
eqneditorCssUrl	Full URL of the equation editor stylesheet.
eqneditorMathmlCssUrl	The MathML stylesheet loaded into the editing area.

Copied to clipboard

Plugins

HTML editors

CMS and LMS

Other

Developers