Notion 风格编辑器组件

概述

NotionEditor 是一个 Notion 风格的块编辑器组件，基于 TipTap 实现，支持斜杠命令、拖拽排序、气泡菜单等特性，提供类似 Notion 的编辑体验。

组件路径：web/apps/web-ele/src/components/zq-form/notion-editor/

组件名称：NotionEditor

功能特性

• 斜杠命令菜单（输入 / 触发）
• 块级拖拽排序
• 气泡菜单（选中文本时显示）
• Turn Into 转换块类型
• 文字颜色和高亮
• 表格编辑（含行列操作菜单）
• Markdown 输入输出
• 字符统计

Props

属性	类型	默认值	说明
modelValue	string	''	Markdown 内容
placeholder	string	'输入 / 打开命令菜单...'	占位符
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
minHeight	number | string	300	最小高度
maxHeight	number | string	600	最大高度

Events

事件	参数	说明
update:modelValue	string	值更新（Markdown 格式）
change	string	内容变化

斜杠命令

输入 / 可触发命令菜单，支持以下命令：

命令	说明
/text	普通文本
/h1	一级标题
/h2	二级标题
/h3	三级标题
/bullet	无序列表
/numbered	有序列表
/quote	引用块
/code	代码块
/table	表格
/divider	分割线

气泡菜单

选中文本时显示气泡菜单，包含：

• Turn Into - 转换块类型
• 加粗/斜体/下划线/删除线 - 文本格式
• 代码 - 行内代码
• 链接 - 插入链接
• 颜色 - 文字颜色和高亮

使用示例

基本用法

<template>
  <NotionEditor v-model="content" />
</template>

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

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

自定义高度

<template>
  <NotionEditor
    v-model="content"
    :min-height="400"
    :max-height="800"
    placeholder="开始编写..."
  />
</template>

只读模式

<template>
  <NotionEditor
    v-model="content"
    :readonly="true"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 notion-editor 类型的表单项使用：

{
  "type": "notion-editor",
  "field": "content",
  "label": "内容",
  "props": {
    "placeholder": "输入 / 打开命令菜单...",
    "minHeight": 300,
    "maxHeight": 600
  }
}

组件结构

• NotionEditor.vue - 主编辑器组件
• components/TableMenu.vue - 表格右键菜单
• components/TableHandles.vue - 表格行列操作手柄
• extensions/slash-command.ts - 斜杠命令扩展

与 RichTextEditor 的区别

特性	NotionEditor	RichTextEditor
编辑风格	块编辑器	传统富文本
输出格式	Markdown	HTML
斜杠命令	支持	不支持
拖拽排序	支持	不支持
工具栏	气泡菜单	固定工具栏
图片/视频上传	不支持	支持

典型应用场景

• 笔记编辑：个人笔记、知识库
• 文档协作：团队文档编写
• 内容创作：博客、文章编写
• 简洁编辑：需要简洁编辑体验的场景