Skip to content

README.md

Latest commit

 

History

History
70 lines (49 loc) · 4.5 KB

README.md

File metadata and controls

70 lines (49 loc) · 4.5 KB
Raw

SwiftGG · 公众号编辑器

一个 所见即所得（WYSIWYG） 的微信公众号文章编辑器，专为 SwiftGG 定制。基于 Tiptap，像 Notion 一样写作——你看到的样子就是公众号里的样子。Apple 风排版，内置灰色 SwiftGG 页眉/页脚（Dongle 文字标志），风格参照 brand.swiftgg.team。

功能

  • 所见即所得 + Markdown 输入法 — 输入 ## 变小标题、- 变列表、> 变引用、` 行内代码……正文实时呈现公众号样式。
  • 选区气泡条 — 选中文字弹出格式工具条（加粗 / 斜体 / 删除线 / 代码 / 链接 / 标题 / 引用 / 列表）。
  • 空行 ＋ 菜单 — 在空行行首出现快捷插入菜单（标题、列表、分隔线、图片、Bilibili…）。
  • 图片 — 顶部「🖼️ 图片」粘贴网络图片 URL。微信粘贴时会自动转存外链图，正常显示。
  • Bilibili — 顶部「📺 B站」粘贴链接/BV 号，编辑器内可直接预览播放。
  • SwiftGG 区块库 — 顶部「🧩 区块库」一键插入 Apple 风格模块：导语、浅色卡、品牌渐变卡、黑色理念区、三连功能卡、引用金句、行动号召、结语署名。
  • 品牌页眉 / 页脚 — 灰色 SwiftGG 小鸟标志 + Dongle 文字标志，仿 SwiftGG 邮件模板，自动包含在导出里。
  • 复制到公众号 — 右上角按钮或 ⌘/Ctrl + Enter，自动转为内联样式 HTML，粘贴到公众号后台即可。
  • 导出 HTML — 下载单文件 .html，可留档或二次处理。

⚠️ 关于 Bilibili 视频

微信公众号正文不支持外链 / 外部播放器，B 站视频无法靠「粘贴 HTML」真正嵌入。本工具的处理：

  1. 编辑器内用 B 站官方播放器直接播放，方便确认视频与位置。
  2. 复制到公众号时，视频位置变成一张标注好 BV 号的「占位卡」。
  3. 到公众号后台点工具栏「小程序」→ 选「哔哩哔哩」→ 粘贴占位卡上的链接，完成官方小程序嵌入。

这是目前唯一能在公众号里正常播放 B 站视频的官方途径。

关于字体与 logo（导出差异）

  • 编辑器内：SwiftGG 文字标志用自托管的 Dongle 字体（assets/fonts/，已随项目附带，适配中国网络与离线）。
  • 复制到微信后：微信不加载自定义字体，导出的页眉/页脚改用 SwiftGG 灰色 图片 logo（沿用邮件模板的 email-logo.png）+ 系统字体「SwiftGG」，确保在公众号里稳定显示。

依赖（全部本地，无运行时 CDN）

  • 编辑器内核 Tiptap 2 已完整本地化到 assets/esm/（109 个模块，去重后只有单一 ProseMirror 实例），运行时不连任何外网 CDN，适配中国网络与离线。
  • Dongle 字体 自托管在 assets/fonts/。
  • 仅 Bilibili 预览播放器（编辑时）和导出页眉/页脚的 logo 图片走外链，其余全部本地。

想升级 Tiptap 版本时，重新运行随项目附带的 tools/vendor_tiptap.py（改其中的 V 版本号）即可重新抓取并去重。

本地使用

用的是 ES Module，不能直接双击 file:// 打开（浏览器对本地模块有安全限制）。请用本地静态服务器：

cd ~/Desktop/swiftgg-wechat-editor
python3 -m http.server 8080
# 浏览器打开 http://localhost:8080

部署到 GitHub Pages

  1. 推到一个仓库：

    cd ~/Desktop/swiftgg-wechat-editor
git init && git add . && git commit -m "SwiftGG 公众号编辑器"
git branch -M main
git remote add origin git@github.com:<你的账号>/swiftgg-wechat-editor.git
git push -u origin main

  2. 仓库 → Settings → Pages → Source 选 Deploy from a branch → main / / (root) → Save。

  3. 访问 https://<你的账号>.github.io/swiftgg-wechat-editor/。仓库已带 .nojekyll。

自定义

  • 正文 / 卡片样式：index.html 里编辑区的 .ProseMirror … CSS（编辑时显示）与底部 TH / CARD 对象（导出内联样式），两处保持一致。
  • 品牌色：Swift Blue #2782FB、GG Orange #FB6131、Ink #0B0B0F、灰 #86868b。
  • 区块库：BLOCKS 数组，每项是一段会被 Tiptap 解析的 HTML（卡片用 <section data-card data-tone="light|blue|dark">）。
  • 页眉 / 页脚文案：HTML 里的 .page-head / .page-foot（屏显）与 exportHTML() 里的 head / foot（导出）。