docs: update plugin markdown

npr765
Hufe921 2 years ago
parent 9dd192ffd2
commit c2d3e941b1

@ -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. addsee moresrc/plugins/markdown // 2. addsee moresrc/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
})
```
Loading…
Cancel
Save