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