:: Table of Contents

CKEditor 5

The fxEditor plugin for CKEditor 5 adds an fx button to the toolbar that opens the equation editor in a balloon, and inserts the result into your document. Try it:

Usage

Click where the equation should go, then click fx on the toolbar.
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.
Double-click an existing equation to edit it again.

Installation

The plugin is published on npm as @codecogs/eqneditor-ckeditor5. It requires CKEditor 5 v42 or later, the release that moved to the single ckeditor5 package.

npm install ckeditor5 @codecogs/eqneditor-ckeditor5

Import it alongside your other CKEditor imports, add it to both plugins and toolbar, and give it your licence key. The Image plugins are needed only if equations may be inserted as images:

import { ClassicEditor, Essentials, Paragraph, Bold, Italic,
         Image, ImageInline, ImageToolbar, ImageTextAlternative } from 'ckeditor5';
import { eqnEditor5 } from '@codecogs/eqneditor-ckeditor5';
import 'ckeditor5/ckeditor5.css';

ClassicEditor.create( document.querySelector( '#editor' ), {
    licenseKey: 'GPL',                       // CKEditor's own licence

    plugins: [ Essentials, Paragraph, Bold, Italic,
               Image, ImageInline, ImageToolbar, ImageTextAlternative,
               eqnEditor5 ],

    toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'EqnEditor5' ],

    eqnEditor: {
        server: 'fxeditor.codecogs.com',
        licence: 'fx_pk_your-key-here'       // fxEditor's licence, from the licence manager
    }
} );

That is the whole integration. The equation editor itself is fetched from fxeditor.codecogs.com the first time it is needed, so there is nothing further to bundle and you always get the current editor.

Two licence keys, two products. licenseKey is CKEditor's own; eqnEditor.licence is ours, and 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.

What gets written into the page

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

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. Needs CKEditor's `Image` plugin.

Both carry the LaTeX they were written from, so either can be reopened by double-clicking it. The plugin teaches CKEditor to keep MathML, so there is no schema 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

Every option lives under the eqnEditor key.

licence		Your fxEditor licence key. Required.
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.
renderUrl	'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.
scriptUrl	from server	Full URL of the equation editor bundle, when the default path does not suit.
cssUrl	from server	Full URL of the equation editor stylesheet.
mathmlCssUrl	from server	The MathML stylesheet loaded into the editing view.

Upgrading from earlier versions. insertAs, showLatex and latexDisplay are no longer read: the author chooses MathML or an image in the balloon itself, and shows or hides the LaTeX with its toggle. An option once documented as Server, with a capital S, is still accepted, but server is the spelling to use.

Change History

v1.x - For CKEditor 4 (and, earlier, CKEditor 3).
v2.0 - Rewritten as a single ES module against the ckeditor5 package, for CKEditor v42 and later.
v2.1 - Adds the WYSIWYG maths view, with the LaTeX markup alongside it. Equations carry their LaTeX as alt text. Fixes a crash when opening the equation editor while another balloon was showing, the dialog failing to close after Save, and two editors on one page interfering with each other.
v2.2 - Inserts MathML by default, with SVG images as the alternative, chosen in the balloon. Activated with an fxEditor licence key.

Copied to clipboard

FxEditor

FxTeX

FxTeX Server