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>

更多示例

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>

提及功能

<template>
  <Editor v-model="content" :mention="true" />
</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>-
disabled禁用编辑booleanfalse
dragHandle拖拽手柄booleantrue
bubbleMenu气泡菜单boolean | EditorToolbarItem[][]-
handlers自定义处理器EditorCustomHandlers-
class附加类名string-

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 输入框