CKEditor 5 mathematical feature

This is the best TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit and view mathematical equation and formulas. This plugin supports MathJax, KaTeX and custom typesetting engines.

Demo (todo)

Link to classic editor demo

Link to inline editor demo

Installation

Install plugin with NPM or Yarn

npm install ckeditor5-math --save-dev

Add import into ckeditor.js file

import Mathematics from 'ckeditor5-math/src/math';

Add it to builtinPlugins

InlineEditor.builtinPlugins = [
	// ...
	Mathematics,
	// ...
];

Add math button to toolbar and optional math config to default config

InlineEditor.defaultConfig = {
	toolbar: {
		items: [
			// ...
			'math',
			// ...
		]
	},
	// ...
	math: {
		engine: 'mathjax',
		outputType: 'script',
		forceOutputType: false
	},
	// ...
};

Copying plugin's theme for Lark

Copy theme/ckeditor5-link folder from https://github.com/isaul32/ckeditor5-theme-lark to your lark theme repository fork.

Supported input and output formats

Supported input and output formats are:

<!-- MathJax style http://docs.mathjax.org/en/v2.7-latest/advanced/model.html#how-mathematics-is-stored-in-the-page -->
<script type="math/tex">\sqrt{\frac{a}{b}}</script>
<script type="math/tex; mode=display">\sqrt{\frac{a}{b}}</script>
<!-- CKEditor 4 style https://ckeditor.com/docs/ckeditor4/latest/features/mathjax.html -->
<span class="math-tex">\( \sqrt{\frac{a}{b}} \)</span>
<span class="math-tex">\[ \sqrt{\frac{a}{b}} \]</span>

Available typesetting engines

MathJax

• Tested by using version 2.7.5 and TeX-MML-AM_HTMLorMML configuration
• Use \( \) delimiters for inline and \[ \] delimiters for display

KaTeX

• Tested by using version 0.11.0
• Doesn't support preview feature because .ck-reset_all * css rules from ckeditor5-ui and ckeditor5-theme-lark breaks it.

Custom

It's possible to implement with engine: (equation, element, display) => { ... } math config.

• equation is equation in TeX format without delimiters
• element is DOM element reserved for rendering
• display is boolean. Typesetting should be inline when false

Plugin options

InlineEditor.defaultConfig = {
    // ...
    math: {
        engine: 'mathjax', // or katex or function (equation, element, display) => { ... }
        outputType: 'script', // or span
        forceOutputType: false // forces output to use outputType
    }
    // ...
}

Styles

• Styles requires PostCSS like offical CKEditor plugins

Todo

• AutoMath like AutoMediaEmbed
• Convert equation images to mathtex when paste from word
• Fix KaTex preview
• Make better way import lark theme for plugin