feat: 用 wangEditor 5 替换 CodeMirror 6
This commit is contained in:
@ -200,123 +200,7 @@
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
/* ---- 工具栏 ---- */
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 5px 16px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
min-height: 38px;
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tb-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.tb-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #4b5563;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tb-btn:hover {
|
||||
background: #e5e7eb;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.tb-btn:active {
|
||||
background: #d1d5db;
|
||||
}
|
||||
|
||||
.tb-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.tb-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #e5e7eb;
|
||||
margin: 0 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tb-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tb-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tb-toggle.active {
|
||||
background: #e0e7ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
/* ---- 代码块语言选择器 ---- */
|
||||
.lang-picker {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 220px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lang-picker-search input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lang-picker-list {
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.lang-picker-item {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lang-picker-item:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.lang-picker-item.selected {
|
||||
background: #e0e7ff;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
/* ---- 编辑器主体（编辑区 + 预览区） ---- */
|
||||
.editor-main {
|
||||
@ -332,24 +216,167 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.editor-pane .cm-editor {
|
||||
height: 100%;
|
||||
/* ================================================================
|
||||
wangEditor 风格覆盖 — 匹配 MetaLab 靛蓝色系
|
||||
================================================================ */
|
||||
|
||||
/* 编辑器整体容器 */
|
||||
#editor-container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.editor-pane .cm-editor .cm-scroller {
|
||||
font-family: 'Menlo', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
/* 编辑区域 */
|
||||
#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%;
|
||||
}
|
||||
|
||||
.editor-pane .cm-editor .cm-content {
|
||||
padding: 16px 20px;
|
||||
/* 工具栏容器 */
|
||||
#toolbar-container .w-e-toolbar {
|
||||
background: #fafafa !important;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #e5e7eb !important;
|
||||
padding: 4px 12px !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-pane .cm-editor .cm-gutters {
|
||||
border-right: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
color: #9ca3af;
|
||||
/* 工具栏按钮 */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* 预览区 */
|
||||
|
||||
Reference in New Issue
Block a user