fix: 修复 wangEditor 布局、预览、图片上传和链接样式
- 修复编辑区高度未撑满问题 - 预览改用 getHtml() 直接展示 - 图片上传改用 fetch + credentials:same-origin(修复 CSRF 403) - 添加帖子正文链接蓝色+下划线样式 - 草稿改用 getHtml() 保存,恢复时正确还原格式 - 草稿改为每 300 字 + 停笔 10 秒双重触发 - 空编辑区不保存草稿 - 代码块语言标签通过 DOMParser 注入(编辑器 + 预览)
This commit is contained in:
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user