huasheng_editor: Instructions file for Codex

公众号 Markdown 编辑器

一个专为微信公众号设计的 Markdown 编辑器，支持实时预览和一键复制富文本格式到公众号后台。

项目概述

这是一个纯前端的 Markdown 编辑器，可以将标准 Markdown 文本转换为适合微信公众号的富文本格式。支持 13 种精心设计的样式主题，每种主题都针对公众号的阅读体验进行了优化。

核心功能

1. Markdown 渲染

• 使用 markdown-it 进行 Markdown 解析
• 支持完整的 Markdown 语法（标题、列表、引用、代码块、表格等）
• 实时预览渲染结果

2. 样式系统

提供 13 种预设样式主题：

• 经典公众号系列：默认、技术、优雅、深度阅读
• 传统媒体系列：杂志风格、纽约时报、金融时报、Jony Ive
• 现代数字系列：Wired 连线、Medium 长文、Apple 极简、Anthropic Claude、AI Coder 特调

每个样式都包含完整的元素定义（标题、段落、列表、引用、代码、表格、图片等）

3. 图片处理系统（⭐ 核心功能）

技术架构概览

本编辑器采用自定义图片协议 + 压缩 + IndexedDB 存储的创新方案，彻底解决了图片粘贴的所有痛点：

用户粘贴图片（任何来源）
    ↓
ImageCompressor 压缩（Canvas API）
    ├─ 最大尺寸：1920x1920px
    ├─ 压缩质量：85%
    ├─ GIF/SVG 不压缩（保持动画/矢量）
    └─ 智能对比：压缩后更大则用原图
    ↓
生成唯一 ID（img-timestamp-random）
    ↓
ImageStore 存储到 IndexedDB
    ├─ 数据库名：WechatEditorImages
    ├─ 存储：Blob + 元数据
    └─ 持久化：刷新不丢失
    ↓
编辑器插入短链接：![图片名](img://img-xxx)
    ↓
渲染预览时：
    ├─ 从 IndexedDB 读取 Blob
    ├─ 创建 Object URL
    ├─ 替换 img:// 为 blob:
    └─ 缓存 Object URL（避免重复读取）
    ↓
复制到公众号时：
    ├─ 检测 data-image-id 属性
    ├─ 从 IndexedDB 读取原始 Blob
    ├─ 转为 Base64
    └─ 替换 img 的 src

核心组件

1. ImageStore 类（app.js:9-213）

负责 IndexedDB 操作的核心类：

class ImageStore {
  constructor() {
    this.dbName = 'WechatEditorImages';
    this.storeName = 'images';
    this.version = 1;
  }

  // 核心方法：
  async init()                        // 初始化 IndexedDB
  async saveImage(id, blob, metadata) // 保存图片
  async getImage(id)                  // 获取图片（返回 Object URL）
  async getImageBlob(id)              // 获取 Blob（用于复制时转 Base64）
  async deleteImage(id)               // 删除图片
  async getAllImages()                // 获取所有图片列表
  async getTotalSize()                // 计算总存储大小
}

数据结构：

{
  id: 'img-1736966400000-abc123def',
  blob: Blob,                    // 压缩后的图片 Blob
  name: '图片名',
  originalSize: 2500000,         // 原始大小（字节）
  compressedSize: 487300,        // 压缩后大小
  compressionRatio: '81',        // 压缩率（%）
  mimeType: 'image/jpeg',
  createdAt: 1736966400000
}