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）都需要执行：

```bash
# 移除 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
```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 正常工作