@wangeditor-next/plugin-formula 0.0.13-beta.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # wangEditor 公式
2
+
3
+ [English Documentation](./README-en.md)
4
+
5
+ ## 介绍
6
+
7
+ [wangEditor-next](https://cycleccc.github.io/docs/) 公式插件,使用 [LateX](https://baike.baidu.com/item/LaTeX/1212106) 语法。
8
+
9
+ ![](./_img/demo.png)
10
+
11
+ ## 安装
12
+
13
+ ```shell
14
+ yarn add katex
15
+ yarn add @wangeditor-next/plugin-formula
16
+ ```
17
+
18
+ ## 使用
19
+
20
+ ### 注册到编辑器
21
+
22
+ ```js
23
+ import { Boot, IEditorConfig, IToolbarConfig } from '@wangeditor-next/editor'
24
+ import formulaModule from '@wangeditor-next/plugin-formula'
25
+
26
+ // 注册。要在创建编辑器之前注册,且只能注册一次,不可重复注册。
27
+ Boot.registerModule(formulaModule)
28
+ ```
29
+
30
+ ### 配置
31
+
32
+ ```js
33
+ // 编辑器配置
34
+ const editorConfig: Partial<IEditorConfig> = {
35
+ // 选中公式时的悬浮菜单
36
+ hoverbarKeys: {
37
+ formula: {
38
+ menuKeys: ['editFormula'], // “编辑公式”菜单
39
+ },
40
+ },
41
+
42
+ // 其他...
43
+ }
44
+
45
+ // 工具栏配置
46
+ const toolbarConfig: Partial<IToolbarConfig> = {
47
+ insertKeys: {
48
+ index: 0,
49
+ keys: [
50
+ 'insertFormula', // “插入公式”菜单
51
+ // 'editFormula' // “编辑公式”菜单
52
+ ],
53
+ },
54
+
55
+ // 其他...
56
+ }
57
+ ```
58
+
59
+ 然后创建编辑器和工具栏,会用到 `editorConfig` 和 `toolbarConfig` 。具体查看 wangEditor 文档。
60
+
61
+ ### 显示 HTML
62
+
63
+ 公式获取的 HTML 格式如下
64
+
65
+ ```html
66
+ <span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="c = \\pm\\sqrt{a^2 + b^2}"></span>
67
+ ```
68
+
69
+ 其中 `data-value` 就是 LateX 格式的值,可使用第三方工具把 `<span>` 渲染成公式卡片,如 [KateX](https://katex.org/)。
70
+
71
+ ## 其他
72
+
73
+ 支持 i18n 多语言