feat(web): 富文本编辑器换成 Vditor,不再自研轮子
CI / backend (push) Canceled after 0s

上一版我自己写了 textarea + 正则工具栏,看着能用,一到粘贴图片、
中文输入法、撤销栈就露馅——这几样正是成熟组件积累的部分。按要求改成品。

- 编辑器开关 def: RichTextEditor = Vditor 4.0.1(MIT,ir 模式)
  * 运行时资源自托管:web/scripts/vendor-vditor.mjs 把 lute/i18n/icons
    同步到 public/vditor,predev/prebuild 自动执行,不走 unpkg CDN
    (内网会一直卡在加载)
- 只读渲染换 markdown-it + dompurify,删掉自写的正则渲染器
- 附件直链的令牌只在内存里存在:落库前 stripAttachmentTokens,
  渲染/装载前补回(<img> 带不了 Authorization 头,raw?token= 是必要折中)
- Vditor 不会替我们插入 upload.handler 的返回值(只当提示语 tip.show),
  所以上传完自己 insertMD

验证:pytest 70 passed;e2e richtext 13 项、smoke 7、tickets 8、
knowledge 7 全绿;tsc 0 错;主包 299 kB/gzip 75 kB,Vditor 独立
chunk 385 kB 按需加载。
This commit is contained in:
dadao
2026-10-29 02:30:10 +08:00
parent 7a7ea932a4
commit fbdf54cb4c
18 changed files with 630 additions and 419 deletions
+50
View File
@@ -277,3 +277,53 @@
font-size: 0.8rem;
line-height: 1.5;
}
/* ---- Vditor 富文本:只做"贴合本产品"的覆写,不改它的行为 ---- */
.rich-text .vditor {
border: 1px solid theme("colors.line.200");
border-radius: 12px;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rich-text .vditor:focus-within {
border-color: theme("colors.primary.400");
box-shadow: 0 0 0 3px theme("colors.primary.100");
}
.rich-text .vditor-toolbar {
background: theme("colors.paper.50");
border-bottom: 1px solid theme("colors.line.100");
padding: 2px 4px;
}
.rich-text .vditor-toolbar__item button {
color: theme("colors.ink.500");
}
.rich-text .vditor-toolbar__item button:hover,
.rich-text .vditor-toolbar__item button.vditor-menu--current {
color: theme("colors.primary.700");
background: theme("colors.primary.50");
}
.rich-text .vditor-reset {
color: theme("colors.ink.800");
font-family: theme("fontFamily.sans");
font-size: 0.9rem;
line-height: 1.75;
padding: 10px 14px;
}
.rich-text .vditor-ir pre.vditor-reset {
background: #fff;
}
.rich-text .vditor-ir pre.vditor-reset:empty::before {
color: theme("colors.ink.300");
}
.rich-text .vditor-reset img {
max-width: 100%;
border-radius: 8px;
}
.rich-text .vditor-panel,
.rich-text .vditor-hint {
border-color: theme("colors.line.200");
border-radius: 10px;
box-shadow: 0 12px 32px -12px rgba(31, 42, 40, 0.28);
font-size: 0.8rem;
}