English | 简体中文

CKEditor 5 mathematical formula editor feature ·

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.

Features
Demos
Screenshots
Installation & Usage
- npm
- CDN
Configuration
Contributions & Translations

Features

LaTeX syntax support
Visualization editing of formulas
Parsing configuration for LaTeX
LaTeX Output Configuration
Customizable visual formula editor panel

Demos

Classic editor with CDN

Screenshots

Screenshot 1

Installation & Usage

npm

Install and use the base dependency mathlive in your project or CKEditor 5 :

npm install --save mathlive

import 'mathlive/dist/mathlive-static.css';
import 'mathlive';

Install and use the plugin in your project or CKEditor 5 :

npm install --save @yayure/ckeditor5-mathlive

import { 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.
    } )

CDN

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.
    } )

Configuration

Default Plugin Configuration

{
    // ...
    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 & Translations

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

Yayure / ckeditor5-mathlive

readme