富文本编辑器

基于 Tiptap 2.x（ProseMirror）构建的企业级富文本编辑器，采用 无头架构（Headless），UI 层完全可控。适用于知识库编辑、博客后台、在线文档协作等场景。

架构概览

┌────────────────────────────────────────┐
│         @axewo/fin-editor              │  ← 统一入口包
│                                        │
│  ├── src/vue/        Vue 3 组件层    │
│  │   FinEditor / BubbleMenu / useEditor │
│  │                                     │
│  ├── src/extensions/ 内置扩展集      │
│  │   text-style / paragraph / image   │
│  │                                     │
│  ├── src/core/       框架无关引擎    │
│  │   EditorInstance / Registry        │
│  │                                     │
│  └── src/theme/      主题样式         │
│      light / dark / print             │
└────────────────────────────────────────┘

设计原则：

原则	说明
无头架构	核心引擎不绑定 UI 框架，Vue/React 适配层独立
扩展注册表	扩展自注册工具栏项、命令、快捷键、生命周期钩子
服务抽象	上传、国际化、主题均为可替换服务接口
不可变原则	编辑器实例与 DOM 元素一一对应，从头到尾不替换

快速开始

安装

# 安装编辑器（所有功能已整合在一个包中）
pnpm add @axewo/fin-editor

# 安装 peer dependencies
pnpm add vue@^3.4.0 @tiptap/vue-3@^2.10.0 element-plus@^2.8.0

基础用法

loading

<script setup lang="ts">
import { ref } from 'vue'
import { FinEditor } from '@axewo/fin-editor'
import '@axewo/fin-editor/dist/style.css'
import '@axewo/fin-editor/dist/theme/light.css'

const content = ref('<p>Hello <strong>DaLuoComponents</strong>!</p>')
</script>

<template>
  <fin-editor v-model="content" />
</template>

模块说明

@axewo/fin-editor 包含以下子模块：

模块	说明
core	编辑器引擎、扩展注册表、服务抽象、类型定义
extensions	内置扩展（文本样式、段落、图片、代码块）
vue	FinEditor 组件、BubbleMenu、useEditor 组合式函数
theme	Light/Dark/Print 主题 + ProseMirror 内容样式

Tiptap 版本

编辑器依赖 @tiptap/core ^2.10.0、@tiptap/pm ^2.10.0 和 @tiptap/vue-3 ^2.10.0。

扩展架构

编辑器的核心设计理念是 Extension Registry Pattern（扩展注册表模式）。

每个扩展是一个 EditorExtension 对象，包含：

interface EditorExtension {
  name: string                        // 唯一名称
  tiptapExtensions?: any[]            // Tiptap Node/Mark/Extension
  toolbarItems?: ToolbarItem[]        // 工具栏项（按钮、下拉、分隔线）
  commands?: Record<string, Function> // 自定义命令
  shortcuts?: ShortcutBinding[]       // 键盘快捷键
  onMount?: (editor) => void          // 挂载钩子
  onUpdate?: (editor) => void         // 更新钩子
  onDestroy?: (editor) => void        // 销毁钩子
}

通过 editor.use(extension) 注册后，编辑器会自动：

1. 将 tiptapExtensions 注入 ProseMirror 编辑器实例
2. 收集 toolbarItems 供 UI 组件渲染工具栏
3. 绑定 shortcuts 为键盘快捷键
4. 在生命周期的对应阶段调用 onMount / onUpdate / onDestroy