MetaZone/MetaLab
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wangEditor 替换为 ByteMD Markdown 编辑器

Browse Source 
- 移除 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:
Victor Jay
2026-05-28 02:16:50 +08:00
parent 804fd50edf
commit 22a302315a
9 changed files with 222 additions and 24906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
templates/MetaLab-2026/html/posts/new.html
View File

@ -1,35 +1,16 @@
{{template "layout/header.html" .}}
<link rel="stylesheet" href="/static/lib/wangeditor.css">
<link rel="stylesheet" href="https://esm.sh/bytemd@1.22.0/dist/index.css">
<link rel="stylesheet" href="https://esm.sh/highlight.js@11.9.0/styles/github.css">
<style>
/* wangEditor 容器适配全高布局 */
#editor-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
height: 100%;
}
#toolbar-container {
flex-shrink: 0;
}
/* ByteMD 编辑器容器适配全高布局 */
#editor-container {
flex: 1;
overflow: hidden;
min-height: 0;
height: 100%;
}
/* .w-e-scroll 是 wangEditor 内部唯一的滚动容器 */
.editor-pane .w-e-text-container {
height: 100% !important;
overflow: hidden;
}
.editor-pane .w-e-scroll {
#editor-container .bytemd {
height: 100%;
overflow-y: auto;
}
.editor-pane .w-e-text-container [data-slate-editor] {
min-height: 100%;
}
</style>
<body>
@ -48,30 +29,18 @@
maxlength="200" required autofocus>
</div>
{{/* 编辑器主体：编辑区 + 预览区 */}}
{{/* 编辑器主体 */}}
<div class="editor-main">
<div class="editor-pane" id="editorPane">
<div id="editor-wrapper">
<div id="toolbar-container"></div>
<div id="editor-container"></div>
</div>
<textarea id="postBody" style="display:none;">{{if .Post}}{{.Post.Body}}{{end}}</textarea>
</div>
<div class="preview-pane" id="previewPane">
<div class="preview-content post-detail-body" id="previewContent">
<em style="color:#9ca3af">预览将在此处显示...</em>
</div>
<div id="editor-container" data-value="{{if .Post}}{{.Post.Body}}{{end}}"></div>
</div>
</div>
{{/* 状态栏 */}}
<div class="editor-statusbar">
<span class="status-item" id="wordCount">0 字</span>
<span class="status-item" id="lineCount">0 行</span>
<span class="status-item" id="readTime">约 1 分钟</span>
<span class="status-spacer"></span>
<span class="status-item status-draft" id="draftStatus" style="display:none">草稿已保存</span>
<span class="status-item" id="btnTogglePreview" style="cursor:pointer" title="切换预览 (Ctrl+Shift+P)">预览</span>
<span class="status-spacer"></span>
<span class="status-item" id="btnFullscreen" style="cursor:pointer" title="全屏编辑 (F11)">全屏</span>
<button type="submit" class="btn btn-primary btn-submit">{{if .Post}}保存修改{{else}}发布帖子{{end}}</button>
</div>
@ -80,6 +49,4 @@
{{template "layout/footer.html" .}}
<script src="/static/lib/wangeditor.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/editor.js"></script>
<script type="module" src="/static/js/editor.js"></script>