smart-editor-v3

简介

smart-editor-v3 是一款基于 Tiptap 编辑器核心进行深度二次开发的富文本编辑器引擎。项目初衷源自团队在实际业务中使用 WangEditor 5 所面临的功能扩展困难与性能瓶颈。为更好地支持电子教材创作中复杂的排版、嵌入式内容、多媒体管理等需求，我们从底层架构出发，打造了这套高可定制、插件化、模块化的编辑解决方案。

该引擎以 Vue 3 组件形式封装，旨在为教材创作者、编辑人员以及相关业务系统的开发者，提供一个既灵活又稳定的内容编辑能力。其设计注重集成便捷性与业务可拓展性，特别适用于需要引入富文本编辑器或电子教材阅读功能的项目。

核心功能

1. 支持常见的富文本编辑器的基本文本和段落编辑，
2. 一系列业务端的自定义节点（包括拼音，iframe，音视频，扩展阅读，试卷，行内元素等）
3. 创新型板式插入模式，实现类似于135编辑器的排版效果
4. 利用indexdDB的本地化缓存方案
5. 复制和粘贴内容代理，输入内容可控
6. AI的深度集成，可直接插入ai生成的内容

开发环境搭建

系统要求

• Node.js : 推荐使用 v18.x 或更高版本
• 包管理器 : 推荐使用 pnpm v8.x 或更高版本
• 操作系统 : 支持 macOS、Windows 和 Linux

安装pnpm

安装依赖

项目使用 pnpm 作为包管理工具，并且需要访问 Tiptap Pro 私有仓库：注意 ：项目依赖 Tiptap Pro 的扩展包，已在 .npmrc 文件中配置了相应的仓库地址和认证令牌。

启动开发服务器

pnpm dev

项目结构说明

项目结构说明

📦 项目根目录
├─ 📁 build                         # 构建脚本/工具配置（通常存放打包相关脚本）
├─ 📁 dist                          # 生产环境构建输出目录（打包后的最终产物）
├─ 📁 node_modules                  # 项目依赖的第三方包（由 pnpm 自动生成）
├─ 📁 public                        # 静态资源目录（不会被构建工具处理）
├─ 📁 src                           # 核心源代码目录
│  ├─ 📁 assets                     # 静态资源目录（图片/字体/媒体文件等）
│  ├─ 📁 composables                # Vue 组合式 API 逻辑封装（复用功能模块）
│  ├─ 📁 extensions                 # 扩展功能模块（插件/编辑器扩展等）
│  ├─ 📁 locales                    # 国际化多语言文件（i18n 配置）
│  ├─ 📁 styles                     # 全局样式文件（CSS/SCSS/UnoCSS 样式）
│  ├─ 📁 utils                      # 工具函数库（通用工具方法）
│  ├─ 📄 App.vue                    # Vue 应用根组件（做组件测试使用）
│  ├─ 📄 main.js                    # 应用入口文件（Vue 初始化/全局配置）
│  ├─ 📄 options.js                 # 编辑器配置选项
│  └─ 📄 slimOptions.js             # 精简版编辑器配置选项
├─ 📁 .vscode                       # VS Code 工作区配置
├─ 📄 .editorconfig                 # IDE基础配置（统一团队编码风格）
├─ 📄 .gitignore                    # Git 忽略规则配置
├─ 📄 .npmrc                        # npm 配置（tiptap认证信息）
├─ 📄 eslint.config.js              # ESLint 配置文件（代码质量检查规则）
├─ 📄 eslint-global-variables.json  # ESLint 全局变量声明
├─ 📄 index.html                    # 应用入口 HTML 文件
├─ 📄 jsconfig.json                 # JavaScript 项目配置（路径别名/类型检查等）
├─ 📄 package.json                  # 项目元数据和依赖管理
├─ 📄 pnpm-lock.yaml                # pnpm 依赖锁文件（确保依赖版本一致性）
├─ 📄 README.md                     # 项目说明文档
├─ 📄 uno.config.js                 # UnoCSS 原子化引擎配置
└─ 📄 vite.config.js                # Vite 构建工具配置（开发/打包核心设置）

核心目录功能详解

1. composables/

• 存放 Vue 3 Composition API 的可复用逻辑
• 示例文件：i18n.js, useMarkdownParse.js 等
• 特点：解耦复杂逻辑，实现功能复用

2. extensions/

• 编辑器自定义扩展
• 采用模块化设计，便于功能插拔

3. locales/

• 国际化语言包（通常按语言分文件）
• 配合 vue-i18n 实现多语言切换

4. styles/

• 全局样式管理体系

5. 编辑器配置文件

• options.js：完整功能配置
• slimOptions.js：轻量版配置（适用于简化场景，试题库）

其他说明文档见团队飞书知识库

架构设计

扩展设计文档

构建与发布