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
+39
View File
@@ -0,0 +1,39 @@
/**
* 附件直链的令牌处理。
*
* 库里存的 Markdown 必须是"干净"的:只记 `/api/v1/.../attachments/<id>/raw`。
* 原因有两条——
* 1. `<img>` 发不出 Authorization 头,图片只能靠 query 里的 token 鉴权;
* 2. token 会过期。要是把它写进正文,几天后整篇文档的图片全变红叉,
* 而且团队里每个人拿到的 token 还不一样,同一个字段没法共用。
*
* 所以规则是:**存的时候剥掉,看的时候现加**。token 永远是当前会话的。
*/
import { session } from "./client";
const UUID = "[0-9a-fA-F-]{36}";
/** 已经带上(或没带)token 的附件直链 */
const RAW_URL = new RegExp(`(/api/v1/workspaces/${UUID}/attachments/${UUID}/raw)(?:\\?token=[^)\"'\\s]*)?`, "g");
function tokenSuffix(): string {
const token = session.access;
return token ? `?token=${encodeURIComponent(token)}` : "";
}
/** 保存前调用:把正文里所有 /raw?token=... 的令牌去掉。 */
export function stripAttachmentTokens(source: string): string {
return (source ?? "").replace(RAW_URL, (_all, url: string) => url);
}
/** 渲染或加载进编辑器前调用:给所有 /raw 链接补上当前令牌。 */
export function tokenizeAttachmentUrls(source: string): string {
const suffix = tokenSuffix();
if (!suffix) return stripAttachmentTokens(source);
return (source ?? "").replace(RAW_URL, (_all, url: string) => `${url}${suffix}`);
}
/** 只处理 HTML 里的 img/src 与 a/href(已渲染的预览用)。 */
export function tokenizeAttachmentHtml(html: string): string {
return tokenizeAttachmentUrls(html);
}