shanxia2.0/docs/superpowers/specs/2026-07-25-tinymce-table-excel-like-design.md

TinyMCE 合同表格「类 Excel」排版增强

背景

合同打印弹窗使用 TinyMceEditor 展示合同 HTML。客户希望表格可像 Excel 一样排版，但合同整体样式、打印/PDF/盖章链路保持现状。

目标（本期）

1. 拖拽调整列宽、行高（调整条更明显、更好拖）
2. 合并/拆分单元格；插入/删除行列
3. 单元格水平/垂直对齐、文字换行
4. 表格/单元格属性对话框可用；保存后打印/PDF 仍为当前合同模样

不做：边框样式专题、公式、冻结窗格、多 sheet、替换编辑器组件。

方案

基于现有 TinyMCE（不换组件），增强 web-admin/src/components/TinyMceEditor/index.vue：

• 新增 utils/tinymce-table-excel-resize.ts：类 Excel 边线拖拽（单元格右边线调列宽、底边线调行高），不依赖 snooker 调整条几何
• 打开/写入内容时将百分比列宽转为像素，避免「拖了没感觉」
• object_resizing 不再包含 table（避免与自定义拖拽冲突）；表格工具栏仍保留合并/拆分/属性/对齐/换行
• 弱化会抢占对齐的全局表格 CSS

已知问题与修复（2026-07-25）

绿色 snooker 调整条可见但无法拖动：对条设置 width/height/margin !important 破坏了 TinyMCE 拖拽几何；合同表百分比列宽导致调整无感知。已改为单元格边线拖拽 + 像素化列宽。

影响面

共用 TinyMceEditor 的合同、报价、调价函、单据打印弹窗一并受益。打印/PDF 仍消费编辑器 HTML，不改生成链路。

验收

编辑模式下：鼠标靠近单元格右边线出现列宽光标并可拖；靠近底边线出现行高光标并可拖；松开后宽高保持，保存再打开仍在；可合并拆分与插删行列；可设对齐与换行；打印/PDF 仍为当前合同样式。