English | 简体中文
ckeditor5-mathlive is a formula editor designed for CKEditor 5 based on mathlive. You can insert, edit, and view formulas based on LaTeX syntax. Meanwhile, the plugin supports up to 800 LaTeX syntaxes by default.
- LaTeX syntax support
- Visualization editing of formulas
- Parsing configuration for LaTeX
- LaTeX Output Configuration
- Customizable visual formula editor panel
Install and use the base dependency mathlive in your project or CKEditor 5 :
npm install --save mathliveimport 'mathlive/dist/mathlive-static.css';
import 'mathlive';Install and use the plugin in your project or CKEditor 5 :
npm install --save @yayure/ckeditor5-mathliveimport { Mathlive, MathlivePanelview } from '@yayure/ckeditor5-mathlive';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Mathlive, /** ... Other plugins. */ ],
toolbar: {
items: [ 'mathlive', /** ... Other toolbar buttons. */ ]
},
mathlive: {
renderMathPanel( element ) {
let panelView = new MathlivePanelview();
panelView.mount( element );
return () => {
panelView.destroy();
panelView = null;
}
}
},
// ... Other configuration options.
} )Add basic dependencies and the plugin :
<head>
<!-- ... Other CKEditor Resources. -->
<link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />
<script defer src="https://unpkg.com/mathlive"></script>
<script src="https://unpkg.com/@yayure/ckeditor5-mathlive/build/mathlive.js"></script>
</head>Using the plugin :
CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKEditor5.mathlive.Mathlive, /** ... other plugins. */ ],
toolbar: [ 'mathlive', /** ... Other toolbar buttons. */ ],
mathlive: {
renderMathPanel( element ) {
let panelView = new CKEditor5.mathlive.MathlivePanelview();
panelView.mount( element );
return () => {
panelView.destroy();
panelView = null;
}
}
},
// ... Other configuration options.
} ){
// ...
mathlive: {
/**
* Mount the formula panel.
*/
renderMathPanel: undefined,
/**
* Whether to destroy the math formula panel when it is closed.
*/
mathPanelDestroyOnClose: false,
/**
* Whether to open the panel when a equation is selected.
*/
openPanelWhenEquationSelected: false,
/**
* Convert elements containing this class name into visual formula displays.
* e.g. <span class="tex2jax_process">\sqrt{\frac{a}{b}}</span>
*/
processClass: 'tex2jax_process',
/**
* Convert the <script> with attribute type set to this value into visual formula displays.
* e.g. <script type="math/tex">\sqrt{\frac{a}{b}}</script>
*/
processScriptType: 'math/tex',
/**
* Define the HTML data that the visualization formula outputs in CKEditor.
* e.g. { type: 'script', attributes: { type: 'math/tex' } } => <script type="math/tex">\sqrt{\frac{a}{b}}</script>
* { type: 'span', attributes: { class: 'math-tex' } } => <span class="math-tex">\sqrt{\frac{a}{b}}</span>
*/
output: {
type: 'script',
attributes: {
type: 'math/tex'
}
}
}
// ...
}Contributions, improvements and bug fixes are welcome. Development documentation can be found here DEVELOPMENT.md。
You can translate the following folders and files
├─ lang
├─ ├─ translations
│ └─ contexts.json