@7polo/vue3-editors

一系列编辑器

| 组件 | 名称 | 底层技术 | 底层技术 | |----------------|-------------|--------------|------| | MindEditor | 思维导图编辑器 | 百度脑图 | ✅ | | MarkdownEditor | markdown编辑器 | md-editor-v3 | ✅ | | BlockEditor | 块编辑器 | editorjs | ✅ | | DrawIO | 图编辑器 | drawio | ❌ | | others | | | ❌ |

一、install

npm install @7polo/vue3-editors

import {BlockEditor, MarkdownEditor, MindEditor} from "@7polo/vue3-editors/components";

二、EditorProps 参数

| 参数 | 描述 | 类型 | 备注 | |----------------------|--------|--------------------------------------|------------| | modelValue (v-model) | 内容 | any | 格式取决于编辑器 | | readOnly (v-model) | 只读 | boolean | | | autoFocus | 自动聚焦 | boolean | | | upload | 文件上传接口 | (files: File[]) => Promise<string[]> | | | editorId | 编辑器id | string | 自动生成 | | extConfig | 额外参数 | any | 提供编辑器定制化参数 |

2.1 mindmap extConfig

2.2 markdown extConfig

2.3 block extConfig

三、事件

| 参数 | 描述 | 类型 | |---------|----------|------------------| | ready | ready事件 | () => void | | changed | change事件 | (v: any) => void |

四、组合编辑器

动态设置编辑器类型

import CompositeEditor from '@7polo/vue3-editors/components'

| 参数 | 描述 | 类型 | 备注 | |----------------|-------|-------------------------------|---------------| | editorType | 编辑器类型 | mindmap、markdown、block-editor | 格式取决于编辑器 | | ...editorProps | - | EditorProps | 同 EditorProps |