Rich Text Editor 富文本编辑器组件的 API 和 Demo 设计

• props
• events
• methods
• slots

API 设计

props

名称	类型	默认值	描述
v-model	string	''	富文本编辑器内容，是一段 HTML 字符串
options	IOptions		透传tiptap的options
disabled	boolean	false	禁用态
max-length	number		设置最大字符数
toolbar-config(没想清楚之前可先不做)	IRichToolbarConfig	?	配置工具栏
editor-config(没想清楚之前可先不做)	IRichEditorConfig	?	配置编辑器
image-upload(没想清楚之前可先不做)	IImageUpload	?	配置图片上传

interface IRichToolbarConfig {
  menus: string[][]
  xxx: yyy
}

events

名称	类型	默认值	描述
change	Function	''	富文本编辑器内容变化
selection-change	Function	''	富文本编辑器光标变化
focus	Function	''	获得焦点
blur	Function	''	失去焦点

methods

设计组件ref，可以透传tiptap实例的方法

slots

Demo 设计

最基本用法：

const editorValue = ref('<div><b>OpenTiny</b>是一个<sp</div>')

<tiny-rich-text-editor v-model="editorValue"></tiny-rich-text-editor>

占位符

<tiny-rich-text-editor v-model="editorValue" placeholder="请输入描述内容"></tiny-rich-text-editor>