CodeCogs fxEditor

An equation editor for CKEditor

Add professional maths editing to CKEditor 5 in minutes. An fx button on the toolbar opens this editor, and the finished equation goes into the document as accessible MathML or an SVG image.

Open the full editor →

This is the editor your authors get. To see it inside CKEditor itself, try the live CKEditor example →

Install

The plugin is on npm as @codecogs/fxeditor-ckeditor5, for CKEditor 5 v42 and later. Add it to your plugins and your toolbar, and give it your licence key.

That is the whole integration. The editor itself is fetched from fxtex.codecogs.com the first time an author opens it, so there is nothing more to bundle, and you always have the current version.

Two licence keys, two products: licenseKey is CKEditor's own, eqnEditor.licence is ours.

Full instructions and options →

Install:

npm install ckeditor5 @codecogs/fxeditor-ckeditor5

Configure:

import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';
import { eqnEditor5 } from '@codecogs/fxeditor-ckeditor5';

ClassicEditor.create( document.querySelector( '#editor' ), {
    licenseKey: 'GPL',
    plugins: [ Essentials, Paragraph, eqnEditor5 ],
    toolbar: [ 'undo', 'redo', '|', 'EqnEditor5' ],
    eqnEditor: {
        licence: 'fx_pk_your-key-here'
    }
} );

What your authors get

Visual or LaTeX, in step

Authors who know LaTeX type it; authors who do not use the toolbar. Either way both views stay in step, with suggestions as they type.

MathML or an image

MathML by default — the mathematics itself, with its spoken text for screen readers, reflowing with the text around it. Or an SVG image with the LaTeX as its alt text.

MathML
a = \frac{F}{m}
SVG image

Edit it again later

The LaTeX travels with every equation, so a double-click reopens it in the editor exactly as it was written.

Newton's second law, , gives the acceleration of a body of mass under a net force :

An illustration: fx on the toolbar opens the editor, and each equation goes in as MathML with its spoken text. Double-click one to edit it.

Make it yours

Choose the toolbar panels, their rows and size, the accent colour, the size of equations and markup, and whether equations go in as MathML, SVG or LaTeX. The plugin's page has a customiser that builds the settings for you and previews them in a real CKEditor.

Running something else? There are plugins for CKEditor 4, TinyMCE, Froala, Tiptap, WordPress, Moodle, the LTI 1.3 learning platforms and more — see them all.

Questions

What does it cost?

It is free in non-commercial applications — a course, a research group's pages, a personal site. A product you sell, or charge for access to, needs a commercial licence, with no territorial or volume restriction.

Does it need a server of ours to show equations?

Not for MathML: once inserted, it is part of your content and needs nothing from us to be read. Equations inserted as SVG images are drawn by fxTeX Server, which an Enterprise licence lets you run yourself.

Can I build an editor of my own instead?

Yes. Every plugin is built on the same public JavaScript API — toolbar, LaTeX view, maths view and output, each usable on its own. API reference →

Try it on the real thing

The full editor is on the home page, with suggestions as you type, history and every export format. It is free for non-commercial use — study, teaching, research or a personal site. Building it into something you sell needs a commercial licence.

Open the editor See licences

More ways to use it