https://github.com/kelen/wangeditor-plugin-imagesource
wangEditor图片来源
https://github.com/kelen/wangeditor-plugin-imagesource
Last synced: about 1 month ago
JSON representation
wangEditor图片来源
- Host: GitHub
- URL: https://github.com/kelen/wangeditor-plugin-imagesource
- Owner: KELEN
- License: mit
- Created: 2023-10-29T00:45:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-28T14:08:55.000Z (over 1 year ago)
- Last Synced: 2025-02-03T09:47:46.247Z (3 months ago)
- Language: TypeScript
- Size: 315 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
# wangEditor formula module
[中文文档](./README.md)
## Introduction
[wangEditor](https://www.wangeditor.com/en/) Formula plugin, use `LateX` syntax.
## Installation
```shell
yarn add katex
yarn add @wangeditor/plugin-image-source
```
## Usage
### Register to editor
```js
import { Boot, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-image-source'
// Register
// You should register this before create editor, and register only once (not repeatedly).
Boot.registerModule(formulaModule)
```
### Menu config
```js
const editorConfig: Partial = {
// Hoverbar keys when selected a formula node.
hoverbarKeys: {
formula: {
menuKeys: ['editFormula'], // “编辑公式”菜单
},
},
// others...
}
const toolbarConfig: Partial = {
insertKeys: {
index: 0,
keys: [
'insertFormula', // Insert formula menu
// 'editFormula' // Edit formula menu
],
},
// others...
}
```
Then create editor and toolbar, you will use `editorConfig` and `toolbarConfig`
### Render HTML
You will get a formula's HTML format like this
```html
```
Dateset `data-value` is the `LateX` syntax value, you can use a third-party lib to render formula card, like [KateX](https://katex.org/).
## Others
Support i18n.