fancy-editor

fancy-editor

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

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

安装

yarn add fancy-editor

使用

库内包含两个命名导出的函数，分别是用于创建编辑的编辑器 createEditor 与用于展示的阅读器 createReader

createEditor

创建阅读器，支持如下参数

• el: 编辑器要绑定到的 dom 元素
• value: 编辑器初始内容
  • type**: **string
  • default**: **''
• onlyFull: 是否仅全屏显示
  • type**: **boolean
  • default**: **false
• to: 全屏显示时依附的容器
  • type**: **string | HTMLElement
  • default: 'body'
• action: 文件上传地址
  • type**: **string
  • default**: **''
• feeds: 提及人员列表，可被 @ 的人
  • type: string[]
  • default: ["Barney", "Lily", "Marshall", "Robin", "Ted"]
• beforeUpload: 上传前的处理函数，可用于自定义请求方式
  • params:
    • file 待上传的文件
      • type: File
  • return: 包含请求配置的 AxiosRequestConfig 对象
    • Promise<AxiosRequestConfig>
• afterUpload: 上传后的处理函数，用于自定义处理上传结果
  • params:
    • response 上传后返回的内容
      • type: AxiosPromise<any>
  • return: 上传的文件预览地址
    • Promise<string>
• beforeDownload: 下载前的处理函数，用于自定义下载地址
  • params:
    • filename 文件名
      • type: string
    • fileUrl 文件预览地址
      • type: string
  • return: 文件下载地址
    • type: string
• on: 事件处理对象
  • change: 内容更新时触发
    • event params:
      • content: 编辑器内容
  • focus: 聚焦事件
    • event params: 无
  • blur: 失焦事件
    • event params: 无
  • preserve: 保存事件，在编辑器中按下 Ctrl + S 时触发
    • event params:
      • content: 编辑器内容

createReader

创建一个阅读器，支持如下参数

• el**: 阅读器要绑定到的 **dom 元素
• content: 要查看的内容
  • type**: **string
  • default**: **''

Typescript 支持

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