@yayure/ckeditor5-mathlive

English | 简体中文

CKEditor 5 公式编辑器功能 · 
==========================

ckeditor5-mathlive是一款基于mathlive为CKEditor 5设计的公式编辑器。你可以对基于LaTeX语法的公式进行插入、编辑和查看。同时该插件默认支持高达800种LaTeX语法。

目录

- 功能
- 演示
- 图例
- 安装和使用
- npm
- CDN
- 配置
- 贡献和翻译

功能

- LaTeX语法支持
- 对公式的可视化编辑
- LaTeX文本的解析配置
- LaTeX公式的文本输出配置
- 自定义可视化公式编辑器面板

演示

Classic editor with CDN

图例

!图例 1

安装和使用

$3

在你的项目或CKEditor 5中安装和使用基础依赖mathlive :

``bash
npm install --save mathlive
`

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

在你的项目或CKEditor 5中安装和使用该插件 :

`bash
npm install --save @yayure/ckeditor5-mathlive
`

`js
import { Mathlive, MathlivePanelview } from '@yayure/ckeditor5-mathlive';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Mathlive, /* ... 其他插件 / ],
toolbar: {
items: [ 'mathlive', /* ... 其他工具栏按钮 / ]
},
mathlive: {
renderMathPanel( element ) {
let panelView = new MathlivePanelview();
panelView.mount( element );
return () => {
panelView.destroy();
panelView = null;
}
}
},
// ... 其他配置项
} )
`

$3

添加基础依赖和该插件 :

`html







`

使用该插件 :

`js
CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKEditor5.mathlive.Mathlive, /* ... 其他插件 / ],
toolbar: [ 'mathlive', /* ... 其他工具栏按钮 / ],
mathlive: {
renderMathPanel( element ) {
let panelView = new CKEditor5.mathlive.MathlivePanelview();
panelView.mount( element );
return () => {
panelView.destroy();
panelView = null;
}
}
},
// ... 其他配置项
} )
`

配置

$3

`js
{
// ...
mathlive: {
/**
* 挂载公式面板。
*/
renderMathPanel: undefined,
/**
* 面板关闭时是否销毁。
*/
mathPanelDestroyOnClose: false,
/**
* 选中CKEditor编辑器中的公式时是否打开面板。
*/
openPanelWhenEquationSelected: false,
/**
* 将含该类名的元素转换为可视化公式展示。
* 如: \( \sqrt{\frac{a}{b}} \)
*/
processClass: 'tex2jax_process',
/**
* 将属性type为该值的script元素转换为可视化公式展示。
* 如: $\sqrt{\frac{a}{b}}$
*/
processScriptType: 'math/tex',
/**
* 定义可视化公式在CKEditor中输出的html数据。
* 如: { type: 'script', attributes: { type: 'math/tex' } } => $\sqrt{\frac{a}{b}}$
* { type: 'span', attributes: { class: 'math-tex' } } => \sqrt{\frac{a}{b}}
*/
output: {
type: 'script',
attributes: {
type: 'math/tex'
}
}
}
// ...
}
`

贡献和翻译

`
├─ lang
├─ ├─ translations
│ └─ contexts.json
``