Files
timi-tdesign-mobile/docs/components/tiptap-editor.md
T
2026-09-21 16:05:14 +08:00

1.1 KiB

TiptapEditor 富文本编辑器

基于 Tiptap 的富文本编辑器,工具栏覆盖媒体、表格、链接与代码块。

基础用法

:::preview 基础用法 || 工具栏按移动端宽度自动换行排列

demo-preview=../demos/tiptap-editor/basic.vue

:::

何时使用

需要所见即所得的正文编辑时使用。内容以 HTML 字符串双向绑定,可直接入库。

媒体上传

图片与视频通过 uploadImage、uploadVideo 回调上传,组件不绑定具体接口。拖拽或粘贴文件时会先插入占位内容,上传成功后替换为真实地址。

未完成的媒体会在提交时统一处理,getPendingMediaCount() 可查询待处理数量。

提交内容

编辑过程中的 v-model 是实时值,提交时建议调用 submit() 以等待未完成的上传并归一化内容:

const html = await editorRef.value?.submit();

移动端差异

工具栏按钮在窄屏下换行排列而不是收进折叠菜单,v-popup 提示在触屏下不可用,按钮已带文字或图标语义。

API