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.

Examples

Link to examples repository

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 or install npm install @ckeditor/ckeditor5-theme-lark@https://github.com/isaul32/ckeditor5-theme-lark --save-dev

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 has also experimental (CHTML, SVG) support for 3.0.0 or newer version.
• 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>

Paste support

Plain TeX paste

Paste equations with delimiters. For example: \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \] or \( x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \)

Paste support from Microsoft Word

Use paste from office fork instead of offical.

Install paste from office fork npm install @ckeditor/ckeditor5-paste-from-office@github:isaul32/ckeditor5-paste-from-office --save-dev

import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Mathematics from 'ckeditor5-math/src/math';
// ...
InlineEditor.builtinPlugins = [
	// ...
	PasteFromOffice,
	Mathematics
];

Todo

• Fix KaTex preview
• MathML input and output when using MathJax version 3
• Make tests

[*] at least in my opinion