fix: 修复 wangEditor 布局、预览、图片上传和链接样式

- 修复编辑区高度未撑满问题
- 预览改用 getHtml() 直接展示
- 图片上传改用 fetch + credentials:same-origin(修复 CSRF 403)
- 添加帖子正文链接蓝色+下划线样式
- 草稿改用 getHtml() 保存,恢复时正确还原格式
- 草稿改为每 300 字 + 停笔 10 秒双重触发
- 空编辑区不保存草稿
- 代码块语言标签通过 DOMParser 注入(编辑器 + 预览)
This commit is contained in:
2026-05-27 23:01:59 +08:00
parent 9d17185e11
commit ec8fa3eb56
3 changed files with 217 additions and 53 deletions

View File

@ -104,15 +104,63 @@
margin-bottom: 12px;
}
.post-detail-body a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s;
}
.post-detail-body a:hover {
color: #2980b9;
}
.post-detail-body pre {
position: relative;
background: #f3f4f6;
padding: 16px;
padding-top: 36px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
}
/* 代码块语言标签(编辑器内 + 预览页通用) */
.post-detail-body pre,
#editor-container [data-slate-editor] pre {
position: relative;
background: #f3f4f6;
padding: 16px;
padding-top: 36px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
}
/* 通过 JS 动态注入语言标签,因为 CSS attr() 无法从 class 中提取 */
.code-lang-label {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 4px 16px;
background: #e5e7eb;
color: #6b7280;
font-size: 11px;
font-weight: 600;
border-radius: 8px 8px 0 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.post-detail-body pre code,
#editor-container [data-slate-editor] pre code {
background: transparent !important;
padding: 0 !important;
font-size: inherit !important;
}
.post-detail-body code {
background: #f3f4f6;
padding: 2px 6px;
@ -223,6 +271,12 @@
/* 编辑器整体容器 */
#editor-container {
background: #fff;
height: 100%;
}
/* wangEditor 内部文本容器撑满 */
#editor-container .w-e-text-container {
height: 100% !important;
}
/* 编辑区域 */
@ -379,6 +433,42 @@
font-style: normal !important;
}
/* 编辑器内代码块样式 */
#editor-container [data-slate-editor] pre {
position: relative;
background: #f3f4f6 !important;
padding: 12px 16px !important;
padding-top: 32px !important;
border-radius: 8px !important;
font-family: 'Menlo', 'Consolas', 'Monaco', 'Liberation Mono', monospace !important;
font-size: 13px !important;
line-height: 1.6 !important;
overflow-x: auto !important;
margin: 12px 0 !important;
}
/* 编辑器内代码块语言标签 */
#editor-container [data-slate-editor] pre::before {
content: attr(data-language);
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 3px 16px;
background: #e5e7eb;
color: #6b7280;
font-size: 11px;
font-weight: 600;
border-radius: 8px 8px 0 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
#editor-container [data-slate-editor] pre code {
background: transparent !important;
padding: 0 !important;
font-size: inherit !important;
}
/* 预览区 */
.preview-pane {
width: 0;