refactor: ByteMD 迁移至 Tiptap WYSIWYG 编辑器 + Token 刷新优化

- 移除 ByteMD CDN 资源和 goldmark 依赖,替换为 Tiptap ESM 模块
- 编辑器从源码编辑模式改为 WYSIWYG 所见即所得
- 移除 /api/posts/preview 预览接口(Tiptap 直接输出 HTML 无需后端渲染)
- 保留 UploadImage 图片上传接口和 bluemonday HTML 消毒
- 工具栏支持加粗、斜体、删除线、代码、标题、列表、引用、代码块、分割线、撤销/重做
- 支持图片粘贴/拖拽上传,Ctrl+S 快捷提交,F11 全屏,字数统计
- 优化 common.js:自动 401 拦截 Token 刷新,修复刷新死循环
- 草稿 localStorage 键名更新为 draft_post_body_html
This commit is contained in:
2026-05-28 11:21:53 +08:00
parent 22a302315a
commit 69ba2fb01b
11 changed files with 467 additions and 166 deletions

View File

@ -25,7 +25,7 @@ type rateLimiter interface {
Clear(email, ip string)
}
// postUseCase PostController 对 PostService 的最小依赖ISP8 个方法)
// postUseCase PostController 对 PostService 的最小依赖ISP6 个方法)
type postUseCase interface {
Create(userID uint, title, body string) (*model.Post, error)
GetByID(id uint) (*model.Post, error)
@ -33,5 +33,4 @@ type postUseCase interface {
Update(postID uint, title, body string) error
Delete(postID uint) error
SubmitForAudit(postID uint) error
RenderMarkdown(body string) (string, error)
}

View File

@ -306,25 +306,6 @@ func (ctrl *PostController) ShowAPI(c *gin.Context) {
common.Ok(c, post)
}
// PreviewAPI Markdown 预览 API
func (ctrl *PostController) PreviewAPI(c *gin.Context) {
var req struct {
Body string `json:"body" binding:"required"`
}
if err := c.ShouldBindJSON(&req); err != nil {
common.Error(c, http.StatusBadRequest, "正文不能为空")
return
}
html, err := ctrl.postService.RenderMarkdown(req.Body)
if err != nil {
common.Error(c, http.StatusInternalServerError, "渲染失败")
return
}
common.Ok(c, gin.H{"html": html})
}
// allowedImageExt 允许的图片扩展名
var allowedImageExt = map[string]bool{
".jpg": true, ".jpeg": true, ".png": true, ".gif": true, ".webp": true,

View File

@ -9,8 +9,8 @@ import (
func SecurityHeaders() gin.HandlerFunc {
return func(c *gin.Context) {
// Content-Security-Policy
// script-src: 本站 + esm.sh CDN (ByteMD ESM 模块)
// style-src: 本站 + esm.sh (ByteMD/highlight.js CSS)
// script-src: 本站 + esm.sh CDN (Tiptap ESM 模块)
// style-src: 本站 + esm.sh (Tiptap CSS)
// connect-src: 本站 + esm.sh (source map 请求)
// img-src: 本站 + data: URI (头像裁切) + blob: (粘贴图片)
c.Header("Content-Security-Policy",

View File

@ -56,7 +56,6 @@ func setupAPIRoutes(r *gin.Engine, cfg *config.Config, d *dependencies) {
postsAPI.PUT("/:id", d.postCtrl.Update)
postsAPI.DELETE("/:id", d.postCtrl.Delete)
postsAPI.POST("/:id/submit", d.postCtrl.Submit)
postsAPI.POST("/preview", d.postCtrl.PreviewAPI)
postsAPI.POST("/upload-image", d.postCtrl.UploadImage)
}
}

View File

@ -1,7 +1,6 @@
package service
import (
"bytes"
"fmt"
"metazone.cc/metalab/internal/common"
@ -9,15 +8,16 @@ import (
"metazone.cc/metalab/internal/model"
"github.com/microcosm-cc/bluemonday"
"github.com/yuin/goldmark"
)
// sanitizePolicy 纵深防御:对 goldmark 输出 HTML 再做一层消毒
// goldmark 默认已过滤原始 HTML 和危险链接,但 bluemonday 作为第二道防线
// UGC 策略会剥离 code/pre 的 class 属性,需要显式放行以保留 language-xxx
// sanitizePolicy Tiptap 输出 HTML 的消毒策略
// 前端 WYSIWYG 编辑器输出 HTML bluemonday UGC 策略消毒
// 显式放行 code/pre 的 class 属性以保留代码块样式
// 放行 img 的 src/alt 属性以保留图片
var sanitizePolicy = func() *bluemonday.Policy {
p := bluemonday.UGCPolicy()
p.AllowAttrs("class").OnElements("code", "pre")
p.AllowAttrs("src", "alt", "title").OnElements("img")
return p
}()
@ -37,7 +37,6 @@ type postStore interface {
type PostService struct {
repo postStore
ss *config.SiteSettings
md goldmark.Markdown
}
// NewPostService 构造函数
@ -45,7 +44,6 @@ func NewPostService(repo postStore, ss *config.SiteSettings) *PostService {
return &PostService{
repo: repo,
ss: ss,
md: goldmark.New(),
}
}
@ -54,27 +52,15 @@ func (s *PostService) auditEnabled() bool {
return s.ss.IsAuditEnabled()
}
// renderMarkdown 将 Markdown 文本渲染为安全 HTML
// goldmark默认安全模式→ bluemonday纵深防御
func (s *PostService) renderMarkdown(body string) (string, error) {
var buf bytes.Buffer
if err := s.md.Convert([]byte(body), &buf); err != nil {
return "", fmt.Errorf("markdown render: %w", err)
}
return sanitizePolicy.Sanitize(buf.String()), nil
}
// RenderMarkdown 对外暴露,用于预览 API
func (s *PostService) RenderMarkdown(body string) (string, error) {
return s.renderMarkdown(body)
// sanitizeHTML 对 Tiptap 输出的 HTML 进行消毒
// 前端 WYSIWYG 编辑器直接输出 HTML后端仅做安全消毒
func (s *PostService) sanitizeHTML(body string) string {
return sanitizePolicy.Sanitize(body)
}
// Create 创建帖子
func (s *PostService) Create(userID uint, title, body string) (*model.Post, error) {
bodyHTML, err := s.renderMarkdown(body)
if err != nil {
return nil, err
}
bodyHTML := s.sanitizeHTML(body)
status := model.PostStatusApproved
if s.auditEnabled() {
@ -129,14 +115,9 @@ func (s *PostService) Update(postID uint, title, body string) error {
return fmt.Errorf("当前状态不允许编辑")
}
bodyHTML, err := s.renderMarkdown(body)
if err != nil {
return err
}
post.Title = title
post.Body = body
post.BodyHTML = bodyHTML
post.BodyHTML = s.sanitizeHTML(body)
// rejected 状态编辑后自动重置为 draft
if post.Status == model.PostStatusRejected {