ckeditor5-math
Advanced tools
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.
Use official classic or inline build as a base:
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 built-in plugins
InlineEditor.builtinPlugins = [
// ...
Mathematics
];
Add math button to toolbar
InlineEditor.defaultConfig = {
toolbar: {
items: [
// ...
'math'
]
}
};
Copy theme/ckeditor5-math folder from https://github.com/isaul32/ckeditor5-theme-lark to your lark theme repository or install
npm install @ckeditor/ckeditor5-theme-lark@https://github.com/isaul32/ckeditor5-theme-lark --save-dev
Styles requires PostCSS like official CKEditor 5 plugins.
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
enablePreview: true // Enable preview view
}
}
MathJax
KaTeX
Custom typesetting
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, preview) => {
// ...
}
}
}
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 TeX equations with delimiters. For example:
\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]
or
\( x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \)
Use paste from office fork instead of official. This feature is experimental and might not work always (look source codes).
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
];
.ck-reset_all * css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.
My solution for this is use rendering element outside of CKEditor DOM and place it right place by using absolute position. Alternative solution could be using iframe, but then we have to copy typesetting engine's scripts and styles to child document.
[*] at least in my opinion 😄
FAQs
Math feature for CKEditor 5.
The npm package ckeditor5-math receives a total of 139 weekly downloads. As such, ckeditor5-math popularity was classified as not popular.
We found that ckeditor5-math demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.