# @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 |

# 四、组合编辑器

动态设置编辑器类型

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

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