# tiptapisle

**Repository Path**: htycode/tiptapisle

## Basic Information

- **Project Name**: tiptapisle
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-11
- **Last Updated**: 2026-03-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

├── packages/
│   ├── core/          # 核心功能包，基于 Tiptap 实现
│   └── vue3/          # Vue 3 组件封装
├── playground/        # 示例项目，用于测试和演示
├── docs/              # 项目文档
├── shared/            # 共享配置和工具
├── .changeset/        # 版本管理
├── turbo.json         # 任务编排配置
└── pnpm-workspace.yaml # 工作区配置

# 项目概述
Isle Editor 是一个基于 Tiptap 和 Vue 3 开发的现代化富文本编辑器，采用模块化设计，支持丰富的编辑功能和灵活的扩展机制。

主要特点：

基于 Tiptap (ProseMirror) 的强大编辑内核
Vue 3 组件化封装，易于集成
丰富的编辑功能（标题、格式、表格、列表等）
多种交互方式（工具栏、气泡菜单、斜杠菜单）
支持国际化和主题定制
模块化设计，便于扩展和维护

# 核心包
## packages/core

3. 核心功能模块
3.1 Core 包（@isle-editor/core）
核心功能包基于 Tiptap 扩展系统实现，提供编辑器的基础功能和扩展点：

主要功能：

编辑器核心类（继承自 Tiptap Editor）
丰富的内容扩展（标题、加粗、斜体、链接等）
工具扩展（历史记录、缩进、颜色选择等）
UI 扩展（气泡菜单、斜杠菜单等）
国际化支持
工具函数集
扩展结构：


plainText
src/extensions/
├── heading.js         # 标题功能
├── bold.js            # 加粗功能
├── link.js            # 链接功能
├── table/             # 表格功能
├── toc.js             # 目录功能
└── ...                # 其他扩展

## packages/vue3

3.2 Vue3 包（@isle-editor/vue3）
Vue 3 组件封装，提供易用的组件接口：

主要组件：

IsleEditor：主编辑器组件
工具栏（ToolbarMenu）
气泡菜单（BubbleMenu）
斜杠菜单（SlashMenu）
目录菜单（TocMenu）
特殊按钮（颜色、字体、对齐等）
预设配置：

basic-kit：基础功能集
notion-kit：类 Notion 编辑器功能
richText-kit：富文本编辑功能


4. 技术栈
类别	技术/工具	用途
核心框架	Vue 3	前端框架
编辑器内核	Tiptap (ProseMirror)	富文本编辑功能
样式	SCSS	样式管理
构建工具	Rollup	打包构建
包管理	pnpm	依赖管理
任务编排	turbo	多包构建和测试
版本管理	changeset	版本控制和发布
代码检查	ESLint, Prettier	代码质量控制
Git 钩子	husky	Git 提交规范


5. 架构设计
5.1 扩展系统
采用 Tiptap 的扩展系统，每个功能都作为独立扩展实现，便于组合和扩展：


javascript
Apply
// 扩展示例（heading.js）
export default Node.create({
  name: "heading",
  addOptions() {
    return {
      levels: [1, 2, 3, 4, 5, 6],
      // 其他配置
    };
  },
  addCommands() {
    return {
      setHeading: (attributes) => ({ commands }) => {
        // 命令实现
      },
      toggleHeading: (attributes) => ({ commands }) => {
        // 命令实现
      },
    };
  },
  // 其他方法
});
5.2 组件设计
Vue 3 组件采用组合式 API 设计，提供清晰的接口和灵活的配置：


javascript
Apply
// 编辑器组件示例（isle-editor.js）
const editorRender = () => {
  editor.value = new Editor({
    element: editorContainer.value,
    content: props.modelValue,
    extensions: extensions,
    editable: props.editable,
    autofocus: props.autofocus,
    // 事件处理
    onUpdate,
    onCreate,
    onFocus,
    onBlur,
    // 其他配置
  });
};
6. 存在的问题与改进建议
6.1 已知问题
h1 扩展实现错误：

packages/core/src/extensions/h1.js 错误地基于 Bold 扩展实现，而不是 Heading 扩展
导致功能异常，无法正确设置标题
工具栏 h1 菜单项无法显示：

工具栏配置中包含 "h1" 菜单项
但代码尝试查找名为 "h1" 的扩展，而标题功能实际由 "heading" 扩展实现
导致 h1 按钮在工具栏中不显示
6.2 改进建议
修复 h1 扩展：

将 h1.js 改为正确的实现，基于 Heading 扩展或直接移除（因为 heading.js 已包含 h1-h6 功能）
优化工具栏菜单加载逻辑：

修改 toolbar-menu.js 中的扩展查找逻辑，正确处理标题等特殊功能
可以参考以下修复方案：

javascript
Apply
// 修复工具栏菜单加载逻辑
if (menu.startsWith("h") && /^h[1-6]$/.test(menu)) {
  const level = parseInt(menu.substring(1));
  const headingExtension = props.editor.extensionManager.extensions.find(
    (ext) => ext.name === "heading"
  );

  if (headingExtension) {
    const headingItem = headingExtension.options.list.find(
      (item) => item.name === `heading${level}`
    );

    if (headingItem) {
      return {
        name: menu,
        ...headingItem,
      };
    }
  }
}
完善文档：

添加扩展开发指南
完善 API 文档
提供更多使用示例
增强测试：

添加单元测试和集成测试
确保功能的稳定性和可靠性

7. 总结
Isle Editor 是一个功能丰富、设计良好的富文本编辑器，基于成熟的 Tiptap 内核和现代化的 Vue 3 框架，具有良好的扩展性和易用性。虽然存在一些小问题，但整体架构清晰，功能完善，适合作为富文本编辑解决方案。

通过修复已知问题并继续完善文档和测试，Isle Editor 有望成为一个更加成熟和稳定的富文本编辑器产品。

# 如何新增一个扩展

core/../extensiions中新增扩展
core/../extensiions/index中导入
packages/vue3/src/kit/notion-kit.js 新增扩展配置
packages/vue3/src/kit/richText-kit.js 新增扩展配置

原理说明
编辑器工具包（Kit）是管理扩展加载的核心机制。每个工具包（如 BasicKit、RichTextKit、NotionKit）都通过 addExtensions() 方法定义了要加载的扩展列表。

当编辑器初始化时，会根据选择的工具包加载相应的扩展。如果一个扩展没有被包含在工具包的 addExtensions() 方法中，它就不会被添加到编辑器的 extensionManager 中，因此在工具栏组件中就无法通过 extensionManager.extensions.find() 找到它。

通过以上修改，我们将 ListGroup 扩展添加到了 RichTextKit 和 NotionKit 工具包中，这样编辑器初始化时就会加载该扩展，工具栏组件也就能够找到并使用它了。