RichText 富文本

基于 TipTap 的 Vue 3 封装，支持工具栏、选区浮动菜单，以及 html / json 输出。

基础用法

选中文字可出现浮动菜单；工具栏支持标题、列表、链接等。

<script setup lang="ts">
import { ref } from 'vue'
import { DanRichText } from '@dandan-ui/ui'

const value = ref('<p>欢迎使用 <strong>dan-ui</strong> 富文本编辑器。</p>')

async function onImageUpload(file: File) {
  return URL.createObjectURL(file)
}
</script>

<template>
  <DanRichText
    v-model="value"
    :on-image-upload="onImageUpload"
    placeholder="试着输入内容，或选中文字看浮动菜单"
  />
</template>

JSON 输出

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "这是 JSON 输出模式"
        }
      ]
    }
  ]
}

<script setup lang="ts">
import { ref } from 'vue'
import { DanRichText } from '@dandan-ui/ui'

const value = ref({
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{ type: 'text', text: '这是 JSON 输出模式' }],
    },
  ],
})
</script>

<template>
  <div style="display: grid; gap: 12px">
    <DanRichText v-model="value" output="json" />
    <pre
      style="
        margin: 0;
        padding: 12px;
        overflow: auto;
        border-radius: 8px;
        background: #0b1220;
        color: #e2e8f0;
        font-size: 12px;
      "
      >{{ JSON.stringify(value, null, 2) }}</pre>
  </div>
</template>

与 Form 联用

标题

正文

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  DanButton,
  DanForm,
  DanFormItem,
  DanInput,
  DanRichText,
  type DanFormInstance,
} from '@dandan-ui/ui'

const formRef = ref<DanFormInstance>()
const model = reactive({
  title: '',
  content: '',
})
const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
}

async function onSubmit() {
  const ok = await formRef.value?.validate()
  window.alert(ok ? '校验通过' : '校验失败')
}
</script>

<template>
  <DanForm
    ref="formRef"
    :model="model"
    :rules="rules"
    label-width="64px"
    style="max-width: 720px"
  >
    <DanFormItem label="标题" prop="title">
      <DanInput v-model="model.title" placeholder="文章标题" clearable />
    </DanFormItem>
    <DanFormItem label="正文" prop="content">
      <DanRichText v-model="model.content" min-height="180px" />
    </DanFormItem>
    <DanFormItem>
      <DanButton type="primary" @click="onSubmit">提交</DanButton>
    </DanFormItem>
  </DanForm>
</template>

API

RichText Props

属性	说明	类型	默认值	必填
modelValue / v-model	编辑器内容	string | JSONContent | null	''	否
output	输出格式	'html' | 'json'	'html'	否
placeholder	空态占位	string	'请输入内容…'	否
disabled	禁用；可继承 Form	boolean	false	否
editable	是否可编辑	boolean	true	否
minHeight	编辑区最小高度	string	'160px'	否
showToolbar	显示工具栏	boolean	true	否
showBubbleMenu	显示选区浮动菜单	boolean	true	否
onImageUpload	图片上传回调，返回可访问 URL；未提供则无法插图	(file: File) => Promise<string> | string	—	否

RichText Events

事件名	说明	回调参数
update:modelValue	内容变化	(value: string | JSONContent) => void
change	内容变化（同步 FormItem）	(value: string | JSONContent) => void
focus	编辑器聚焦	(event: FocusEvent) => void
blur	编辑器失焦（同步 FormItem）	(event: FocusEvent) => void

RichText Slots

插槽名	说明	作用域参数
toolbar	自定义工具栏	{ editor, openImagePicker }
bubble-menu	自定义选区菜单	{ editor }

RichText Expose

方法 / 属性	说明
editor	TipTap Editor 实例 Ref
getEditor	获取 Editor
openImagePicker	打开本地图片选择
focus	聚焦编辑器
clear	清空内容

基础扩展

StarterKit（标题/加粗/斜体/删除线/下划线/链接/列表/引用/代码块/撤销重做）+ Placeholder + Image。

依赖

请在业务项目安装 TipTap peer 依赖：

pnpm add @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-image @tiptap/pm