Editor 富文本编辑器

基于 Tiptap 的富文本编辑器，支持 Markdown

何时使用

  • 需要用户输入富文本内容（加粗、列表、图片等）时。

EditorToolbar、EditorBubbleMenu、EditorDragHandle、EditorSuggestionMenu、EditorMentionMenu 提供工具栏、气泡菜单、拖拽手柄等扩展能力。

导入

import { Editor, EditorToolbar } from "@reglow/reui";

基础用法

<script setup>
import { ref } from "vue";
import { Editor } from "@reglow/reui";

const content = ref("<p>Hello World</p>");
</script>

<template>
  <Editor v-model="content" placeholder="请输入内容..." />
</template>

开箱即用

未传默认插槽时，Editor 自动启用顶部工具栏、斜杠命令（输入 /）、@ 提及、:emoji 表情与行拖拽手柄，无需任何配置即可获得完整编辑体验。

<script setup>
import { ref } from "vue";
import { Editor } from "@reglow/reui";

const content = ref("<p>开箱即用</p>");
</script>

<template>
  <!-- 未传默认插槽：自动启用工具栏 / 斜杠命令 / 拖拽手柄 -->
  <Editor v-model="content" />
</template>

各能力可通过 props 独立控制（toolbar / suggestion / mentionItems / emojiItems / dragHandle），详见下方 API。

更多示例

HTML 格式

<script setup>
const content = ref("");
</script>

<template>
  <Editor v-model="content" content-type="html" placeholder="输入 HTML..." />
</template>

Markdown 格式

<script setup>
const content = ref("");
</script>

<template>
  <Editor v-model="content" content-type="markdown" placeholder="输入 Markdown..." />
</template>

工具栏

<script setup>
import { ref } from "vue";
import { Editor, EditorToolbar } from "@reglow/reui";

const content = ref("");
</script>

<template>
  <Editor v-model="content">
    <template #default="{ editor }">
      <EditorToolbar :editor="editor" />
    </template>
  </Editor>
</template>

气泡菜单

<template>
  <Editor v-model="content" :bubble-menu="true" />
</template>

拖拽排序

<template>
  <Editor v-model="content" :drag-handle="true" />
</template>

提及功能（@）

提供 mentionItems 后，输入 @ 自动弹出成员候选列表（支持头像、描述），选中后插入提及标签。

<script setup>
import { ref } from "vue";

const content = ref("<p>输入 @ 触发候选列表</p>");

const mentionItems = [
  { label: "张三", description: "产品经理", avatar: "..." },
  { label: "李四", description: "前端工程师", avatar: "..." },
];
</script>

<template>
  <Editor v-model="content" :mention-items="mentionItems" />
</template>

仅启用提及扩展（不提供候选列表）时使用 :mention="true"。

<template>
  <Editor v-model="content" :mention="true" />
</template>

emoji 表情（:）

提供 emojiItems 后，输入 : 自动弹出 emoji 候选列表。

<script setup>
import { ref } from "vue";

const content = ref("<p>输入 : 试试 emoji 候选</p>");

const emojiItems = [
  { name: "smile", emoji: "😄", shortcodes: ["smile"], tags: ["happy"] },
  { name: "rocket", emoji: "🚀", shortcodes: ["rocket"], tags: ["launch"] },
];
</script>

<template>
  <Editor v-model="content" :emoji-items="emojiItems" />
</template>

禁用编辑

<template>
  <Editor v-model="content" disabled />
</template>

API

Editor Props

参数说明类型默认值
modelValue (v-model)编辑器内容Content-
contentType内容类型json | html | markdown自动推断
placeholder占位文字string | PlaceholderOptions-
starterKitStarterKit 配置Partial<StarterKitOptions>-
markdownMarkdown 配置Partial<MarkdownExtensionOptions>-
image图片扩展booleantrue
mention提及扩展boolean | Partial<MentionOptions>true
disabled禁用编辑booleanfalse
dragHandle拖拽手柄booleantrue
bubbleMenu气泡菜单boolean | EditorToolbarItem[][]false
toolbar顶部工具栏（仅未传默认插槽时生效）boolean | EditorToolbarItem[][]true
suggestion斜杠命令（/）菜单boolean | EditorSuggestionMenuItem[]true
mentionItems@提及候选列表（提供后自动启用）EditorMentionMenuItem[][]
emojiItemsemoji（:）候选列表（提供后自动启用）EditorEmojiMenuItem[][]
handlers自定义处理器EditorCustomHandlers-
class附加类名string-

说明：

  • toolbar / suggestion / dragHandle 仅在未传默认插槽（开箱即用模式）时生效；传默认插槽时由插槽完全自定义。
  • contentType 未显式指定时自动推断：字符串含 Markdown 语法（标题/列表/引用/代码围栏/表格/链接等）且不含 HTML 标签时按 markdown 解析，否则按 html；对象按 json。

Editor Slots

名称说明作用域参数
default编辑器内容区域{ editor, handlers }

Editor 仅提供 default 插槽，工具栏、气泡菜单、拖拽手柄等需在插槽内使用对应子组件渲染。

子组件插槽

组件插槽说明作用域参数
EditorToolbaritem自定义工具栏项{ item, index, isActive, isDisabled, onClick }
EditorBubbleMenudefault自定义气泡菜单内容{ editor }
EditorDragHandledefault自定义拖拽手柄{ onClick }

导出组件

组件说明
Editor编辑器主组件
EditorToolbar工具栏
EditorBubbleMenu气泡菜单
EditorDragHandle拖拽手柄
EditorSuggestionMenu建议菜单
EditorMentionMenu提及菜单
EditorEmojiMenu表情菜单

EditorContentType

类型说明
jsonTiptap JSON 格式
htmlHTML 格式
markdownMarkdown 格式
DatePicker 日期选择器
DatePicker 日期选择器
Input 输入框
Input 输入框