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