feat: wangEditor 替换为 ByteMD Markdown 编辑器
- 移除 wangEditor 5 库文件（1.27MB JS + 14KB CSS，含手动 hack） - 集成 ByteMD 1.22.0（基于 CodeMirror 5，不依赖 contentEditable） - 编辑器输出 Markdown 原文，后端 goldmark + bluemonday 双重防护渲染 HTML - 删除 editor.js 中 scrollIntoView hack、code-lang-label DOM 注入、PreviewAPI 调用 - 清理 posts.css 中 ~200 行 wangEditor 样式覆盖（w-e-* 类名） - 清理 show.html 中 code-lang-label JS 注入（goldmark 自带 language-xxx class） - 更新 CSP 安全策略：移除 CodeMirror 注释，保留 esm.sh CDN - go.mod：bluemonday 和 goldmark 均保留为直接依赖（纵深防御）
This commit is contained in:
@ -125,9 +125,8 @@
|
||||
color: #2980b9;
|
||||
}
|
||||
|
||||
/* 代码块基础样式（详情页预览 + 编辑器内通用） */
|
||||
.post-detail-body pre,
|
||||
#editor-container [data-slate-editor] pre {
|
||||
/* 代码块基础样式 */
|
||||
.post-detail-body pre {
|
||||
position: relative;
|
||||
background: #f3f4f6;
|
||||
padding: 12px 16px;
|
||||
@ -154,8 +153,7 @@
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.post-detail-body pre code,
|
||||
#editor-container [data-slate-editor] pre code {
|
||||
.post-detail-body pre code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
@ -265,232 +263,14 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
wangEditor 风格覆盖 — 匹配 MetaLab 靛蓝色系
|
||||
================================================================ */
|
||||
|
||||
/* 编辑器整体容器 */
|
||||
/* ByteMD 编辑器容器 */
|
||||
#editor-container {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* wangEditor 内部文本容器撑满 */
|
||||
#editor-container .w-e-text-container {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* 编辑区域 */
|
||||
#editor-container [data-slate-editor] {
|
||||
padding: 16px 24px;
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
color: #1f2937;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* 工具栏容器 */
|
||||
#toolbar-container .w-e-toolbar {
|
||||
background: #fafafa !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #e5e7eb !important;
|
||||
padding: 4px 12px !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 工具栏按钮 */
|
||||
#toolbar-container .w-e-bar-item button {
|
||||
color: #4b5563 !important;
|
||||
padding: 4px 6px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
#toolbar-container .w-e-bar-item button:hover {
|
||||
background: #e5e7eb !important;
|
||||
color: #111 !important;
|
||||
}
|
||||
|
||||
/* 工具栏按钮激活态 */
|
||||
#toolbar-container .w-e-bar-item button.active {
|
||||
background: #e0e7ff !important;
|
||||
color: #6366f1 !important;
|
||||
}
|
||||
|
||||
/* 工具栏分隔线 */
|
||||
#toolbar-container .w-e-bar-divider {
|
||||
background: #e5e7eb !important;
|
||||
margin: 4px 6px !important;
|
||||
}
|
||||
|
||||
/* 下拉菜单面板 */
|
||||
.w-e-panel-container {
|
||||
background: #fff !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
|
||||
}
|
||||
|
||||
.w-e-panel-container .w-e-panel-content {
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
/* 下拉菜单项 */
|
||||
.w-e-dropdown-item {
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
.w-e-dropdown-item:hover {
|
||||
background: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
.w-e-dropdown-item.active {
|
||||
background: #e0e7ff !important;
|
||||
color: #6366f1 !important;
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.w-e-bar-item .w-e-bar-item-menus-container {
|
||||
background: #fff !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
|
||||
}
|
||||
|
||||
/* 链接/图片输入弹窗 */
|
||||
.w-e-modal {
|
||||
background: #fff !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
|
||||
}
|
||||
|
||||
.w-e-modal input,
|
||||
.w-e-modal textarea {
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 14px !important;
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
.w-e-modal input:focus,
|
||||
.w-e-modal textarea:focus {
|
||||
border-color: #6366f1 !important;
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.w-e-modal button {
|
||||
border-radius: 6px !important;
|
||||
font-size: 13px !important;
|
||||
padding: 6px 16px !important;
|
||||
}
|
||||
|
||||
.w-e-modal .w-e-modal-header {
|
||||
border-bottom: 1px solid #e5e7eb !important;
|
||||
}
|
||||
|
||||
.w-e-modal .w-e-modal-footer {
|
||||
border-top: 1px solid #e5e7eb !important;
|
||||
}
|
||||
|
||||
/* 确认按钮颜色覆盖为靛蓝 */
|
||||
.w-e-modal .w-e-modal-footer button:last-child {
|
||||
background: #6366f1 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.w-e-modal .w-e-modal-footer button:last-child:hover {
|
||||
background: #4f46e5 !important;
|
||||
}
|
||||
|
||||
/* 表格创建选择器 */
|
||||
.w-e-table-panel {
|
||||
background: #fff !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.w-e-table-panel .w-e-table-panel-item {
|
||||
border-color: #e5e7eb !important;
|
||||
background: #f9fafb !important;
|
||||
}
|
||||
|
||||
.w-e-table-panel .w-e-table-panel-item.active {
|
||||
background: #e0e7ff !important;
|
||||
border-color: #6366f1 !important;
|
||||
}
|
||||
|
||||
/* 选中文本背景色 */
|
||||
#editor-container [data-slate-editor] ::selection {
|
||||
background: #c7d2fe !important;
|
||||
}
|
||||
|
||||
/* placeholder */
|
||||
#editor-container [data-slate-editor] [data-slate-placeholder] {
|
||||
color: #c4c4c4 !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
/* 编辑器内代码块样式 — 以预览区样式为准 */
|
||||
#editor-container [data-slate-editor] pre {
|
||||
position: relative;
|
||||
background: #f3f4f6 !important;
|
||||
padding: 12px 16px !important;
|
||||
padding-top: 36px !important;
|
||||
border-radius: 8px !important;
|
||||
font-family: 'Menlo', 'Consolas', 'Monaco', 'Liberation Mono', monospace !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.5 !important;
|
||||
overflow-x: auto !important;
|
||||
margin: 12px 0 !important;
|
||||
}
|
||||
|
||||
/* 语言标签由 JS 动态注入 .code-lang-label，不再使用 ::before 伪元素 */
|
||||
/* 若 wangEditor 的 pre 上有 data-language 属性，则作为降级方案 */
|
||||
#editor-container [data-slate-editor] pre[data-language]::before {
|
||||
content: attr(data-language);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px 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;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
font-size: inherit !important;
|
||||
}
|
||||
|
||||
/* 预览区 */
|
||||
.preview-pane {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-pane.visible {
|
||||
width: 50%;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
#editor-container .bytemd {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
/* ---- 状态栏 ---- */
|
||||
|
||||
Reference in New Issue
Block a user