2026-10-29-tinymce-table-edge-resize.md 2.2 KB
富文本表格边缘拖拽 Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 在 TinyMCE 里只通过第一行右边界调列宽、第一列下边界调行高，拖宽一列时整张表变宽。
Architecture: 列宽、行高的数值变化放在纯函数里。编辑器里另挂一层短句柄，只在鼠标靠近对应边界时出现；松手才记入撤销。打开编辑器时不改表格 HTML。
Tech Stack: Vue 3、TinyMCE、Node node:test。
Task 1: 列宽与行高纯函数
Files:
- Create:
web-admin/src/utils/tinymce-table-edge-resize.ts Test:
web-admin/src/utils/tinymce-table-edge-resize.test.ts[x] Step 1: 写出失败测试
applyColumnWidthDelta([100, 36, 46], 1, 20) 得到宽度 [100, 56, 46]、表宽 202。位移 -100 时该列停在 28。applyRowHeightDelta(30, -40) 得到 20。
- Step 2: 运行测试确认失败
Run: node --experimental-strip-types --test src/utils/tinymce-table-edge-resize.test.ts
Expected: FAIL，模块尚不存在。
- Step 3: 实现纯函数并通过测试
列宽下限 28，行高下限 20。只改目标列，表宽等于各列之和。
- Step 4: 再跑测试
Expected: PASS。
Task 2: 编辑器短句柄
Files:
- Modify:
web-admin/src/utils/tinymce-table-edge-resize.ts - Modify:
web-admin/src/components/TinyMceEditor/index.vue Modify: 合同弹窗、合同详情、报价弹窗里的编辑提示
[x] Step 1:
setupTableEdgeResize
只读不挂句柄。句柄带 data-mce-bogus="all"，保存内容时不带上。第一行且 colspan === 1 的格子右边界调列宽；该行从第 1 列起始的格子下边界调行高。拖列时写入 col、表头单元格、表宽和同样的 max-width。拖行时只写该行高度。
- Step 2: 在
TinyMceEditor的setup中调用
原生 table_resize_bars 保持 false。
- Step 3: 提示文案改为「表头右边界调列宽，每行最左格下边界调行高」