您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

Web 富文本編輯器圖文混排存入 MySQL 完整技術方案

編輯：程式設計綜合問答

需求拆解

頁面需支持文字輸入、圖片粘貼/上傳、圖文混排展示，最終將內容持久化至 MySQL。

核心架構：富文本編輯器 + 對象存儲 + 數據庫存引用

1. 前端選型：成熟富文本編輯器

編輯器	特點	適用場景
WangEditor	輕量、中文文檔完善、圖片上傳插件化	中後台、CMS、輕量級項目
TinyMCE	功能最全、插件生態豐富、商業授權	企業級 CMS、郵件編輯器
Quill	現代 API、模塊化、Delta 格式數據	協作編輯、React/Vue 深度集成

推薦 WangEditor v5：npm install @wangeditor/editor @wangeditor/editor-for-vue，配置 MENU_CONF['uploadImage'] 即可實現粘貼上傳。

2. 圖片存儲：對象存儲（OSS）而非數據庫 Blob

✅ MySQL 僅存 VARCHAR(500) 圖片 URL
✅ 圖片文件上傳至阿里云 OSS / AWS S3 / MinIO / 本地 Nginx 靜態目錄
✅ 編輯器上傳回調返回 { errno: 0, data: { url: "https://cdn.xxx.com/abc.png" } }

3. 數據庫設計

CREATE TABLE `article` (
  `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(200) NOT NULL,
  `content` LONGTEXT NOT NULL COMMENT 'HTML 內容，含 <img src="...">',
  `cover_image` VARCHAR(500) DEFAULT NULL,
  `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

4. 關鍵安全與性能點

XSS 防護：後端保存前用 Jsoup.clean(html, Safelist.relaxed()) 或前端 DOMPurify 淨化
圖片防盜鏈：OSS 配置 Referer 白名單、簽名 URL 過期時間
大內容分頁：超長文章前端虛擬滾動、後端分段加載
編輯器實例復用：SPA 路由切換時銷毀實例防止內存洩漏

最小可行性代碼片段

// Vue 3 + WangEditor 5
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const editorConfig = ref({
  MENU_CONF: {
    uploadImage: {
      async customUpload(file, insertFn) {
        const formData = new FormData();
        formData.append('file', file);
        const res = await api.uploadImage(formData); // 返回 {url: '...'}
        insertFn(res.url);
      }
    }
  }
});

// 後端 Spring Boot
@PostMapping("/upload")
public Map upload(@RequestParam MultipartFile file) {
    String url = ossClient.putObject(bucket, "article/" + UUID.randomUUID(), file.getInputStream());
    return Map.of("errno", 0, "data", Map.of("url", url));
}

摒棄「Base64 存庫」「Blob 直存」反模式，擁抱「富文本編輯器 + OSS + HTML 存庫」現代架構，輕鬆實現圖文混排持久化與高性能交付。