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-math folder from https://github.com/isaul32/ckeditor5-theme-lark to your lark theme repository fork.

Styles

Styles requires PostCSS like offical CKEditor plugins.

Configuration & Usage

Available typesetting engines

MathJax

• Tested by using version 2.7.5 and TeX-MML-AM_HTMLorMML configuration. It works also with version 3.0.0 or newer!
• 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 config. For example, this feature can be used when use back end rendering.

InlineEditor.defaultConfig = {
	// ...
	math: {
		engine: (equation, element, display) => {
			// ...
		}
	}
}

• 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 or math
        forceOutputType: false // forces output to use outputType
    }
}

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>

Math paste support

It's possible to paste equations in mathtex by using delimiters. For example:

• \( x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \) (inline mode)
• \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \] (display mode)

Todo

• Convert equations to mathtex when paste document from word
• Fix KaTex preview
• Make better way to import lark theme for plugin
• MathML input and output when using MathJax version 3