docs: update plugin markdown
This commit is contained in:
@@ -21,6 +21,10 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
text: 'Demo',
|
text: 'Demo',
|
||||||
link: 'https://hufe.club/canvas-editor'
|
link: 'https://hufe.club/canvas-editor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '官方插件',
|
||||||
|
link: '/guide/plugin-internal.html'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
sidebar: [
|
sidebar: [
|
||||||
@@ -71,7 +75,10 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '插件',
|
text: '插件',
|
||||||
items: [{ text: '自定义插件', link: '/guide/plugin' }]
|
items: [
|
||||||
|
{ text: '自定义插件', link: '/guide/plugin-custom' },
|
||||||
|
{ text: '官方插件', link: '/guide/plugin-internal' }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
socialLinks: [
|
socialLinks: [
|
||||||
@@ -104,6 +111,10 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
text: 'Demo',
|
text: 'Demo',
|
||||||
link: 'https://hufe.club/canvas-editor'
|
link: 'https://hufe.club/canvas-editor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Official plugin',
|
||||||
|
link: '/en/guide/plugin-internal.html'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
sidebar: [
|
sidebar: [
|
||||||
@@ -154,7 +165,10 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Plugin',
|
text: 'Plugin',
|
||||||
items: [{ text: 'plugin', link: '/en/guide/plugin' }]
|
items: [
|
||||||
|
{ text: 'custom', link: '/en/guide/plugin-custom' },
|
||||||
|
{ text: 'official', link: '/en/guide/plugin-internal' }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
# Custom Plugin
|
# Custom Plugin
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
1. Currently, only methods can be added and modified to the editor instance, and more functions will be extended in the future
|
Official plugin: https://github.com/Hufe921/canvas-editor-plugin
|
||||||
2. Official maintenance plugin: https://github.com/Hufe921/canvas-editor-plugin
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Write a Plugin
|
## Write a Plugin
|
||||||
@@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) {
|
|||||||
|
|
||||||
// 2. add,see more:src/plugins/markdown
|
// 2. add,see more:src/plugins/markdown
|
||||||
editor.command.addFunction = () => {}
|
editor.command.addFunction = () => {}
|
||||||
|
|
||||||
|
// 3. listener, eventbus, shortcut, contextmenu, override...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
# Official plugin
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Official plugin: https://github.com/Hufe921/canvas-editor-plugin
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Barcode1d
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(barcode1DPlugin)
|
||||||
|
|
||||||
|
instance.executeInsertBarcode1D(
|
||||||
|
content: string,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
options?: JsBarcode.Options
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Barcode2d
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(barcode2DPlugin, options?: IBarcode2DOption)
|
||||||
|
|
||||||
|
instance.executeInsertBarcode2D(
|
||||||
|
content: string,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
hints?: Map<EncodeHintType, any>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Code block
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(codeblockPlugin)
|
||||||
|
|
||||||
|
instance.executeInsertCodeblock(content: string)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Word
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(docxPlugin)
|
||||||
|
|
||||||
|
command.executeImportDocx({
|
||||||
|
arrayBuffer: buffer
|
||||||
|
})
|
||||||
|
|
||||||
|
instance.executeExportDocx({
|
||||||
|
fileName: string
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Excel
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(excelPlugin)
|
||||||
|
|
||||||
|
command.executeImportExcel({
|
||||||
|
arrayBuffer: buffer
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Floating toolbar
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(floatingToolbarPlugin)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Diagram
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(diagramPlugin)
|
||||||
|
|
||||||
|
command.executeLoadDiagram({
|
||||||
|
lang?: Lang
|
||||||
|
data?: string
|
||||||
|
onDestroy?: (message?: any) => void
|
||||||
|
})
|
||||||
|
```
|
||||||
@@ -1,8 +1,7 @@
|
|||||||
# 自定义插件
|
# 自定义插件
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
1. 目前仅支持对编辑器实例进行方法的增加及修改,后续扩展更多功能
|
官方维护插件仓库:https://github.com/Hufe921/canvas-editor-plugin
|
||||||
2. 官方维护插件:https://github.com/Hufe921/canvas-editor-plugin
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## 开发插件
|
## 开发插件
|
||||||
@@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) {
|
|||||||
|
|
||||||
// 2. 增加方法,详见:src/plugins/markdown
|
// 2. 增加方法,详见:src/plugins/markdown
|
||||||
editor.command.addFunction = () => {}
|
editor.command.addFunction = () => {}
|
||||||
|
|
||||||
|
// 3. 事件监听、快捷键、右键菜单、重写方法等组合处理
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
# 官方插件
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
官方维护插件仓库:https://github.com/Hufe921/canvas-editor-plugin
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 条形码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(barcode1DPlugin)
|
||||||
|
|
||||||
|
instance.executeInsertBarcode1D(
|
||||||
|
content: string,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
options?: JsBarcode.Options
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 二维码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(barcode2DPlugin, options?: IBarcode2DOption)
|
||||||
|
|
||||||
|
instance.executeInsertBarcode2D(
|
||||||
|
content: string,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
hints?: Map<EncodeHintType, any>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码块
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(codeblockPlugin)
|
||||||
|
|
||||||
|
instance.executeInsertCodeblock(content: string)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Word
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(docxPlugin)
|
||||||
|
|
||||||
|
command.executeImportDocx({
|
||||||
|
arrayBuffer: buffer
|
||||||
|
})
|
||||||
|
|
||||||
|
instance.executeExportDocx({
|
||||||
|
fileName: string
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Excel
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(excelPlugin)
|
||||||
|
|
||||||
|
command.executeImportExcel({
|
||||||
|
arrayBuffer: buffer
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## 悬浮工具
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(floatingToolbarPlugin)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 流程图
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Editor from '@hufe921/canvas-editor'
|
||||||
|
import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
|
||||||
|
|
||||||
|
const instance = new Editor()
|
||||||
|
instance.use(diagramPlugin)
|
||||||
|
|
||||||
|
command.executeLoadDiagram({
|
||||||
|
lang?: Lang
|
||||||
|
data?: string
|
||||||
|
onDestroy?: (message?: any) => void
|
||||||
|
})
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user