# fancy-editor

基于 `vue3` + `tiptap2` 封装的富文本编辑器，具有以下优势：

- 开箱即用
- 现代化的界面（仿语雀）
- 支持拖拽上传，并自动识别文件类型，`chrome 91+` 支持粘贴文件上传
- 支持图片尺寸调整
- 代码块多语言支持

## 安装

```shell
yarn add fancy-editor
```

## 使用

库内包含两个命名导出的 `vue3` 组件，分别是用于编辑的编辑器 `Editor` 与用于展示的阅读器 `Reader`

```typescript
import { defineComponent } from 'vue'
import { Editor, Reader } from 'fancy-editor'
import 'fancy-editor/dist/style.css'

export default defineComponent({
    components: { Editor, Reader }
})
```

### Editor

阅读器支持 `v-model` 数据双向绑定与以下属性数据与事件

- `props`:
  - `modelValue`: 编辑器内容
    - `type`: `string`
    - `default`: `''`
  - `onlyFull`: 是否仅全屏显示
    - `type`: `boolean`
    - `default`: `false`
  - `to`: 全屏显示时依附的容器
    - `type`: `string | HTMLElement`
    - `default: ` `'body'`
  - `action`: 文件上传地址，如果不是有效的 `url`，会自动转换为内联`base64`
    - `type`: `string`
    - `default`: `''`
- `event`:
  - `update:modelValue`: 内容更新时触发
    - `event params`:
      - `content`: 编辑器内容
  - `change`: 与 `update:modelValue` 事件相同
  - `focus`: 聚焦事件
    - `event params`: 无
  - `blur`: 失焦事件
    - `event params`: 无
  - `preserve`: 保存事件，在编辑器中按下 `Ctrl + S` 时触发
    - `event params`:
      - `content`: 编辑器内容

### Reader

阅读器只接受一个属性数据，那就是要查看的内容

- `props`:
  - `content`: 要查看的内容
    - `type`: `string`
    - `default`: `''`

## Typescript 支持

包含 `ts` 类型声明，可给予开发者更好的编辑体验