CKEditor 5

Installation

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

npm install ckeditor5 @codecogs/fxeditor-ckeditor5Copy

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/fxeditor-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: 'fxtex.codecogs.com',
        licence: 'fx_pk_your-key-here',      // fxEditor's licence, from the licence manager
        design: { colour: '#0f7a4d' }        // optional - see Customise and download below
    }
} );Copy

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

Complete example

The whole of the page running above: a simple, complete HTML page that loads CKEditor 5 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 balloon:

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.

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

Configuration

Every option lives under the eqnEditor key.