fancy-editor-vue3 v0.14.18

fancy-editor

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

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

安装

yarn add fancy-editor

使用

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

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 类型声明，可给予开发者更好的编辑体验