yunzerwebsiteallinone/.mimocode/plans/1784001763172-stellar-sailor.md

Plan: 用 Tiptap 替换 wangEditor

目标

将项目中所有 wangEditor 编辑器替换为 Tiptap，保留全部现有功能（文字格式、标题、列表、表格、图片上传、视频、链接、代码/引用、颜色、撤销重做等），保持 v-model 接口不变。

需要修改的文件清单

新建文件

文件	说明
platform/src/views/components/TiptapEditor.vue	Tiptap 编辑器组件（替代 WangEditor）

修改文件

文件	改动
platform/package.json	移除 @wangeditor/editor，添加 Tiptap 依赖
backend/package.json	同上
platform/src/main.js	替换 WangEditor 全局注册为 TiptapEditor
backend/src/main.js	同上
platform/src/views/tools/notebook/components/edit.vue	改用 TiptapEditor
platform/src/views/tools/notebook/components/WangEditor.vue	删除此文件
backend/src/views/apps/cms/articles/components/edit.vue	改用 TiptapEditor
backend/src/views/apps/cms/products/components/edit.vue	改用 TiptapEditor，更新 import (line 98)
backend/src/views/apps/cms/articles/components/edit.vue	改用 TiptapEditor，更新 import (line 174)，更新 w-e-* 样式 (line 538-539)
backend/src/views/components/WangEditor.vue	替换为 TiptapEditor（或删除后改名）
platform/src/views/Main.vue	更新 w-e-* 选择器为新的编辑器选择器
backend/src/views/Main.vue	同上
platform/src/assets/less/style.less	更新 .w-e-* 样式为新编辑器样式
backend/src/assets/less/style.less	同上

可删除文件

文件	说明
platform/src/views/components/WangEditor.vue	被 TiptapEditor 替代
platform/src/views/tools/notebook/components/WangEditor.vue	被 TiptapEditor 替代
backend/src/views/components/WangEditor.vue	被 TiptapEditor 替代

---

Step 1: 安装 Tiptap 依赖，移除 wangEditor

两个项目（platform、backend）都需要执行：

# 移除 wangEditor
npm uninstall @wangeditor/editor

# 安装 Tiptap 核心
npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit

# 安装扩展
npm install @tiptap/extension-underline
npm install @tiptap/extension-text-style
npm install @tiptap/extension-color
npm install @tiptap/extension-highlight
npm install @tiptap/extension-placeholder
npm install @tiptap/extension-link
npm install @tiptap/extension-image
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header
npm install @tiptap/extension-text-align

---

Step 2: 创建 TiptapEditor.vue 组件

路径：platform/src/views/components/TiptapEditor.vue

组件接口（保持与 WangEditor 一致）

• Props: modelValue: string (HTML)
• Emits: update:modelValue
• Expose: clear(), getContent(), setContent(content)

功能模块

编辑器核心

• 使用 useEditor + EditorContent from @tiptap/vue-3
• Extensions 列表：
  • StarterKit (bold, italic, strike, headings H1-H6, orderedList, bulletList, code, codeBlock, blockquote, horizontalRule, history/undo/redo)
  • Underline
  • TextStyle + Color + Highlight (文字颜色/背景色)
  • Placeholder ("请输入内容...")
  • Link (超链接)
  • Image (图片)
  • Table + TableRow + TableCell + TableHeader (表格，支持 resizable)
  • TextAlign (left/center/right/justify)

工具栏

分组按钮布局，从左到右：

1. 文字格式: 加粗(B)、斜体(I)、下划线(U)、删除线(S)
2. 标题: H1-H4 下拉或按钮组
3. 列表: 有序、无序
4. 引用/代码: 引用块、代码块
5. 链接: 插入/编辑链接
6. 图片: 上传图片按钮
7. 视频: 插入视频（URL 方式）
8. 表格: 插入表格、删除行/列、合并单元格
9. 颜色: 文字颜色、背景色
10. 对齐: 左/中/右/两端
11. 其他: 撤销、重做

图片上传

• 复用现有 uploadFile API（@/api/file）
• 上传到 /api/files，带 Bearer token
• 与现有 WangEditor 上传逻辑一致

HTML 双向同步

• editor.on('update') → emit('update:modelValue', editor.getHTML())
• watch(modelValue) → editor.commands.setContent(newVal) (避免循环触发)

样式

• 保持现有 .wang-editor-wrapper 的视觉风格
• 新编辑器使用 .tiptap-editor-wrapper 类名
• 编辑区域使用 Tiptap 默认的 .tiptap 类名
• 支持 dark mode（html.dark 选择器）

---

Step 3: 替换全局注册

platform/src/main.js

// 移除: import WangEditor from '@/views/components/WangEditor.vue';
// 添加: import TiptapEditor from '@/views/components/TiptapEditor.vue';
// 移除: app.component('WangEditor', WangEditor);
// 添加: app.component('TiptapEditor', TiptapEditor);

backend/src/main.js

同上。

---

Step 4: 更新消费者页面

3 个消费者页面需要将 <WangEditor v-model="xxx" /> 改为 <TiptapEditor v-model="xxx" />：

1. platform/src/views/tools/notebook/components/edit.vue (line 19)

   • 改 <WangEditor> → <TiptapEditor>
   • 移除 import WangEditor from './WangEditor.vue'

2. backend/src/views/apps/cms/articles/components/edit.vue

   • 改 <WangEditor> → <TiptapEditor>
   • 移除或更新 import

3. backend/src/views/apps/cms/products/components/edit.vue (line 28)

   • 改 <WangEditor> → <TiptapEditor>
   • 保留 style="height: 450px;"

---

Step 5: 更新 Main.vue 事件处理

两个 Main.vue 中的右键菜单拦截逻辑需要更新选择器：

旧: '.wang-editor-wrapper', '.w-e-toolbar', '.w-e-drop-panel', '.w-e-modal', '.w-e-toolbar-menu', '[class*="w-e-"]'
新: '.tiptap-editor-wrapper', '.tiptap-toolbar', '[class*="tiptap-"]'

---

Step 6: 更新全局样式

两个 style.less 中将 .wang-editor-wrapper / .w-e-* 选择器替换为新的 Tiptap 编辑器选择器。

---

Step 7: 删除旧文件

• 删除 platform/src/views/components/WangEditor.vue
• 删除 platform/src/views/tools/notebook/components/WangEditor.vue
• 删除 backend/src/views/components/WangEditor.vue

---

Step 8: 更新文档

• platform/src/views/tools/notebook/README.md - 更新技术栈描述
• docs/NOTEBOOK_DEPLOYMENT_CHECKLIST.md - 更新依赖安装命令

---

验证方式

1. cd platform && npm install - 确认依赖安装无报错
2. cd backend && npm install - 同上
3. 启动 platform 开发服务器，测试：
   • 笔记本编辑器：输入文字、格式化、插入表格、上传图片
   • 工具栏所有按钮可用
   • v-model 双向绑定正常
4. 启动 backend 开发服务器，测试：
   • CMS 文章编辑器：所有功能正常
   • CMS 产品编辑器：所有功能正常
5. 测试 dark mode 切换下编辑器样式
6. 测试表格内 Backspace/Delete 正常工作