Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@dmoosocool/ckeditor5-math
Advanced tools
ckeditor5-math is a TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit, and view mathematical equations and formulas. This plugin supports MathJax, KaTeX and custom typesetting engines.
If you get duplicated modules error, you have mismatching versions.
Use official classic or inline build as a base:
Install plugin with NPM or Yarn
npm install @isaul32/ckeditor5-math --save-dev
yarn add @isaul32/ckeditor5-math --dev
Add import into ckeditor.js file
import Math from '@isaul32/ckeditor5-math/src/math';
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';
Add it to built-in plugins
InlineEditor.builtinPlugins = [
// ...
Math,
AutoformatMath
];
Add math button to toolbar
InlineEditor.defaultConfig = {
toolbar: {
items: [
// ...
'math'
]
}
};
Copy theme/ckeditor5-math folder from https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark to your lark theme repository
Use the official DLL build and additionally load the math plugin:
<script src="path/to/node_modules/@isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorClassic.ClassicEditor
.create(editorElement, {
plugins: [
CKEditor5.math.Math,
...
],
...
});
</script>
InlineEditor.defaultConfig = {
// ...
math: {
engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
outputType: 'script', // or span
className: 'math-tex', // class name to use with span output type, change e.g. MathJax processClass (v2) / processHtmlClass (v3) is set
forceOutputType: false, // forces output to use outputType
enablePreview: true, // Enable preview view
previewClassName: [], // Class names to add to previews
popupClassName: [], // Class names to add to math popup balloon
katexRenderOptions: {} // KaTeX only options for katex.render(ToString)
}
}
MathJax
KaTeX
katexRenderOptions
- pass options.
InlineEditor.defaultConfig = {
// ...
math: {
engine: 'katex'
katexRenderOptions: {
macros: {
"\\neq": "\\mathrel{\\char`≠}",
},
},
}
}
Custom typesetting
Custom typesetting is possible to implement with engine config. For example, custom typesetting 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} \)
Ctrl+M can be used to add easily math formulas in inline mode.
Autoformat for math can be used to add formula in display mode on a new line by adding \[
or $$
. This feature requires additional autoformat plugin to be added.
Add following lines into your build
// ...
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';
InlineEditor.builtinPlugins = [
// ...
AutoformatMath
];
or use it with DLL build
<script src="path/to/node_modules/@isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorInline.InlineEditorEditor
.create(editorElement, {
plugins: [
CKEditor5.math.AutoformatMath,
...
],
...
});
</script>
.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 to right place by using absolute position. Alternative solution could be using iframe, but then typesetting engine's scripts and styles have to copy to child document.
ckeditor5-math does not have typings yet. TypeScript builds of CKEditor will see this:
src/ckeditor.ts:63:18 - error TS7016: Could not find a declaration file for module '@isaul32/ckeditor5-math/src/math'.
'/path/to/your/project/node_modules/@isaul32/ckeditor5-math/src/math.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/isaul32__ckeditor5-math` if it exists or add a new declaration (.d.ts) file containing
`declare module '@isaul32/ckeditor5-math/src/math';`
Create a d.ts
declaration file, e.g. typings/ckeditor5-math.d.ts
declare module '@isaul32/ckeditor5-math';
declare module '@isaul32/ckeditor5-math/src/math';
declare module '@isaul32/ckeditor5-math/src/autoformatmath';
In your tsconfig.json
's
root-level include
option, make sure your declaration file is covered, e.g.
{
"extends": "ckeditor5/tsconfig.json",
"include": [
"src",
"typings",
"../../typings"
]
}
Contributions, improvements and bug fixes are welcome. To aid in this, try out our developer environment w/ live reload support and CKEditor 5 inspector.
To enter a development loop with hot reload support:
git clone https://github.com/isaul32/ckeditor5-math.git
cd ckeditor5-math
yarn
yarn start
FAQs
Math feature for CKEditor 5.
We found that @dmoosocool/ckeditor5-math demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.