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