This repository has been archived on 2026-06-21. You can view files and clone it, but cannot push or open issues or pull requests.
Files
MetaLab/templates/MetaLab-2026/html/posts/new.html
Victor_Jay ec8fa3eb56 fix: 修复 wangEditor 布局、预览、图片上传和链接样式
- 修复编辑区高度未撑满问题
- 预览改用 getHtml() 直接展示
- 图片上传改用 fetch + credentials:same-origin(修复 CSRF 403)
- 添加帖子正文链接蓝色+下划线样式
- 草稿改用 getHtml() 保存,恢复时正确还原格式
- 草稿改为每 300 字 + 停笔 10 秒双重触发
- 空编辑区不保存草稿
- 代码块语言标签通过 DOMParser 注入(编辑器 + 预览)
2026-05-27 23:01:59 +08:00

80 lines
2.8 KiB
HTML

{{template "layout/header.html" .}}
<link rel="stylesheet" href="/static/lib/wangeditor.css">
<style>
/* wangEditor 容器适配全高布局 */
#editor-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
height: 100%;
}
#toolbar-container {
flex-shrink: 0;
}
#editor-container {
flex: 1;
overflow-y: auto;
min-height: 0;
height: 100%;
}
.editor-pane .w-e-text-container {
height: 100% !important;
}
.editor-pane .w-e-text-container [data-slate-editor] {
min-height: 100%;
}
</style>
<body>
{{template "layout/nav.html" .}}
<div class="editor-layout">
<form id="postForm" class="editor-form">
<input type="hidden" id="postId" value="{{if .Post}}{{.Post.ID}}{{end}}">
{{/* 标题区域 */}}
<div class="editor-header">
<input type="text" id="postTitle" class="editor-title-input"
value="{{if .Post}}{{.Post.Title}}{{end}}"
placeholder="输入文章标题..."
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>
</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-item" id="btnFullscreen" style="cursor:pointer" title="全屏编辑 (F11)">全屏</span>
<button type="submit" class="btn btn-primary btn-submit">{{if .Post}}保存修改{{else}}发布帖子{{end}}</button>
</div>
</form>
</div>
{{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>