From c2d3e941b19a6bc766b0bfa8dac7911578170b6c Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 8 Aug 2024 20:42:20 +0800 Subject: [PATCH] docs: update plugin markdown --- docs/.vitepress/config.ts | 18 ++- docs/en/guide/{plugin.md => plugin-custom.md} | 5 +- docs/en/guide/plugin-internal.md | 109 ++++++++++++++++++ docs/guide/{plugin.md => plugin-custom.md} | 5 +- docs/guide/plugin-internal.md | 109 ++++++++++++++++++ 5 files changed, 240 insertions(+), 6 deletions(-) rename docs/en/guide/{plugin.md => plugin-custom.md} (64%) create mode 100644 docs/en/guide/plugin-internal.md rename docs/guide/{plugin.md => plugin-custom.md} (70%) create mode 100644 docs/guide/plugin-internal.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 95bfe60ba..8cdb33f9b 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -21,6 +21,10 @@ export default defineConfig({ { text: 'Demo', link: 'https://hufe.club/canvas-editor' + }, + { + text: '官方插件', + link: '/guide/plugin-internal.html' } ], sidebar: [ @@ -71,7 +75,10 @@ export default defineConfig({ }, { text: '插件', - items: [{ text: '自定义插件', link: '/guide/plugin' }] + items: [ + { text: '自定义插件', link: '/guide/plugin-custom' }, + { text: '官方插件', link: '/guide/plugin-internal' } + ] } ], socialLinks: [ @@ -104,6 +111,10 @@ export default defineConfig({ { text: 'Demo', link: 'https://hufe.club/canvas-editor' + }, + { + text: 'Official plugin', + link: '/en/guide/plugin-internal.html' } ], sidebar: [ @@ -154,7 +165,10 @@ export default defineConfig({ }, { text: 'Plugin', - items: [{ text: 'plugin', link: '/en/guide/plugin' }] + items: [ + { text: 'custom', link: '/en/guide/plugin-custom' }, + { text: 'official', link: '/en/guide/plugin-internal' } + ] } ] } diff --git a/docs/en/guide/plugin.md b/docs/en/guide/plugin-custom.md similarity index 64% rename from docs/en/guide/plugin.md rename to docs/en/guide/plugin-custom.md index 672d4d4af..05d519f38 100644 --- a/docs/en/guide/plugin.md +++ b/docs/en/guide/plugin-custom.md @@ -1,8 +1,7 @@ # Custom Plugin ::: tip -1. Currently, only methods can be added and modified to the editor instance, and more functions will be extended in the future -2. Official maintenance plugin: https://github.com/Hufe921/canvas-editor-plugin +Official plugin: https://github.com/Hufe921/canvas-editor-plugin ::: ## Write a Plugin @@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) { // 2. add，see more：src/plugins/markdown editor.command.addFunction = () => {} + + // 3. listener, eventbus, shortcut, contextmenu, override... } ``` diff --git a/docs/en/guide/plugin-internal.md b/docs/en/guide/plugin-internal.md new file mode 100644 index 000000000..1f59f41e4 --- /dev/null +++ b/docs/en/guide/plugin-internal.md @@ -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 +) +``` + +## 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 +}) +``` diff --git a/docs/guide/plugin.md b/docs/guide/plugin-custom.md similarity index 70% rename from docs/guide/plugin.md rename to docs/guide/plugin-custom.md index d939b6aed..6bd54f68e 100644 --- a/docs/guide/plugin.md +++ b/docs/guide/plugin-custom.md @@ -1,8 +1,7 @@ # 自定义插件 ::: tip -1. 目前仅支持对编辑器实例进行方法的增加及修改，后续扩展更多功能 -2. 官方维护插件：https://github.com/Hufe921/canvas-editor-plugin +官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin ::: ## 开发插件 @@ -14,6 +13,8 @@ export function myPlugin(editor: Editor, options?: Option) { // 2. 增加方法，详见：src/plugins/markdown editor.command.addFunction = () => {} + + // 3. 事件监听、快捷键、右键菜单、重写方法等组合处理 } ``` diff --git a/docs/guide/plugin-internal.md b/docs/guide/plugin-internal.md new file mode 100644 index 000000000..08b79d4a2 --- /dev/null +++ b/docs/guide/plugin-internal.md @@ -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 +) +``` + +## 代码块 + +```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 +}) +```