上一版我自己写了 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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user