fancy-editor
v0.14.30
Published
基于 `vue3` + `tiptap2` 封装的富文本编辑器,具有以下优势:
Downloads
140
Readme
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
类型声明,可给予开发者更好的编辑体验