{"id":48554258,"url":"https://github.com/aaaaanson/mbeditor","last_synced_at":"2026-04-12T02:10:21.635Z","repository":{"id":349574712,"uuid":"1202931408","full_name":"AAAAAnson/mbeditor","owner":"AAAAAnson","description":"支持 CLI 化操作的微信公众号编辑器 — 编辑·预览·发布·AI 驱动","archived":false,"fork":false,"pushed_at":"2026-04-06T16:58:14.000Z","size":2266,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-06T17:11:27.826Z","etag":null,"topics":["ai-agent","claude-code","cli","docker","editor","fastapi","html-editor","markdown-editor","openai-codex","react","wechat","wechat-article","wechat-official-account"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AAAAAnson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-06T14:49:50.000Z","updated_at":"2026-04-06T17:07:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/AAAAAnson/mbeditor","commit_stats":null,"previous_names":["aaaaanson/mbeditor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/AAAAAnson/mbeditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AAAAAnson%2Fmbeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AAAAAnson%2Fmbeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AAAAAnson%2Fmbeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AAAAAnson%2Fmbeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AAAAAnson","download_url":"https://codeload.github.com/AAAAAnson/mbeditor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AAAAAnson%2Fmbeditor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31549900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"online","status_checked_at":"2026-04-08T02:00:06.127Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agent","claude-code","cli","docker","editor","fastapi","html-editor","markdown-editor","openai-codex","react","wechat","wechat-article","wechat-official-account"],"created_at":"2026-04-08T10:01:22.330Z","updated_at":"2026-04-08T10:01:22.957Z","avatar_url":"https://github.com/AAAAAnson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# MBEditor\n\n### 首款 AI Agent 原生的微信公众号编辑器\n\n**告诉你的 Agent 一句话，从排版到发布全自动完成。**\n\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Docker](https://img.shields.io/badge/Docker-一键部署-2496ED.svg)](docker-compose.yml)\n[![AI Agent](https://img.shields.io/badge/Agent-Claude_|_Codex_|_OpenClaw-8B5CF6.svg)](skill/mbeditor.skill.md)\n[![Version](https://img.shields.io/badge/Version-2.0-E8553A.svg)](https://github.com/AAAAAnson/mbeditor/releases/tag/v2.0)\n\n\u003c/div\u003e\n\n---\n\n![MBEditor 编辑器](docs/screenshots/editor-v2.png)\n\n## 为什么做了这个\n\n市面上的公众号编辑器都是给人用的。\n\n但当 AI Agent 成为内容生产的主力，编辑器需要的不是更好看的 UI，而是 **能被程序调用的接口**。MBEditor 的每个功能都是一个 API 端点——创建文章、上传图片、切换排版、推送草稿箱——全部 `curl` 一行搞定。\n\n你可以用 Claude Code 说一句「写一篇 Docker 入门推文，杂志风排版，发到草稿箱」，剩下的事情 Agent 自己完成。\n\n## 三个核心差异\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"33%\"\u003e\n\n**Agent 原生**\n\n不是\"兼容 AI\"，是\"为 AI 设计\"。完整 RESTful API，Skill 文件即装即用。Claude Code / Codex / OpenClaw 任意一个 Agent 都能直接操控编辑器。\n\n\u003c/td\u003e\n\u003ctd width=\"33%\"\u003e\n\n**CLI 全流程**\n\n从创建到发布，不需要打开浏览器。所有操作都可以用命令行完成。适合 CI/CD 流水线、定时任务、批量生产。\n\n\u003c/td\u003e\n\u003ctd width=\"34%\"\u003e\n\n**高度自定义排版**\n\n三种编辑模式 + 六种交互组件 + 无限自定义。HTML/CSS/JS 三栏编辑给你完全的排版控制权，Markdown 模式让你专注写作。\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## 快速开始\n\n### 第一步：部署 MBEditor\n\n```bash\ngit clone https://github.com/AAAAAnson/mbeditor.git\ncd mbeditor\ndocker compose up -d\n```\n\n部署完成后：\n- **编辑器界面**：http://localhost:7073\n- **API 接口**：http://localhost:7072/api/v1\n\n### 第二步：安装 AI Agent Skill\n\nMBEditor 提供了 `skill/mbeditor.skill.md`，安装后 Agent 就能直接操控编辑器。根据你使用的 Agent 选择对应方式：\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cstrong\u003eClaude Code\u003c/strong\u003e\u003c/summary\u003e\n\n**方式一：项目级安装（推荐）**\n\n在 MBEditor 项目目录下直接使用，Agent 会自动发现 `skill/mbeditor.skill.md`：\n\n```bash\ncd mbeditor\nclaude \"帮我写一篇关于 Docker 的推文，推到草稿箱\"\n```\n\n**方式二：全局安装（任意目录可用）**\n\n将 Skill 文件复制到 Claude Code 的全局 skills 目录：\n\n```bash\n# macOS / Linux\nmkdir -p ~/.claude/skills\ncp skill/mbeditor.skill.md ~/.claude/skills/mbeditor.skill.md\n\n# Windows\nmkdir %USERPROFILE%\\.claude\\skills\ncopy skill\\SKILL.md %USERPROFILE%\\.claude\\skills\\mbeditor.skill.md\n```\n\n安装后在任意目录都可以使用：\n\n```bash\nclaude \"写一篇 AI 入门的公众号文章，杂志风排版，发到草稿箱\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCodex\u003c/strong\u003e\u003c/summary\u003e\n\n将 Skill 文件放到 Codex 的 agents 目录：\n\n```bash\n# macOS / Linux\nmkdir -p ~/.codex/agents\ncp skill/mbeditor.skill.md ~/.codex/agents/mbeditor.skill.md\n\n# 使用\ncodex \"部署微信编辑器，然后写一篇推文发到草稿箱\"\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eOpenClaw\u003c/strong\u003e\u003c/summary\u003e\n\n使用 OpenClaw 的 skill 命令直接注册：\n\n```bash\nopenclaw skill add ./skill/mbeditor.skill.md\n\n# 使用\nopenclaw \"写一篇公众号推文，主题是 Docker 入门\"\n```\n\n\u003c/details\u003e\n\n\u003e **注意**：Skill 中默认端口为 Docker 部署的 `7072`（API）和 `7073`（编辑器）。如果你用本地开发模式运行，需要将端口改为对应的本地端口，或在 `docker-compose.yml` 中修改端口映射。\n\n### 第三步：配置微信公众号（可选）\n\n如果需要一键推送到公众号草稿箱，在编辑器的「设置」页面填入微信公众号的 AppID 和 AppSecret，或通过 API 配置：\n\n```bash\ncurl -X PUT http://localhost:7072/api/v1/config \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"appid\":\"wx你的appid\",\"appsecret\":\"你的appsecret\"}'\n```\n\n## Agent 工作流\n\nMBEditor 的设计哲学是 **Agent First**。Agent 通过 REST API 完成全部操作：\n\n```bash\n# 1. 创建文章\ncurl -X POST http://localhost:7072/api/v1/articles \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"title\":\"AI 入门指南\",\"mode\":\"html\"}'\n# → {\"data\": {\"id\": \"a1b2c3\"}}\n\n# 2. 写入内容\ncurl -X PUT http://localhost:7072/api/v1/articles/a1b2c3 \\\n  -d '{\"html\":\"\u003ch1\u003eAI 入门\u003c/h1\u003e\u003cp\u003e正文...\u003c/p\u003e\", \"css\":\"h1{color:#333}\"}'\n\n# 3. 上传图片\ncurl -X POST http://localhost:7072/api/v1/images/upload \\\n  -F \"file=@cover.png\"\n\n# 4. 一键推送到微信草稿箱\ncurl -X POST http://localhost:7072/api/v1/publish/draft \\\n  -d '{\"article_id\":\"a1b2c3\"}'\n```\n\n或者一句话搞定：\n\n```bash\nclaude \"写一篇关于 MBEditor 的推文，杂志风排版，推到草稿箱\"\n```\n\n## 推荐搭配 Skill\n\nMBEditor 负责编辑和发布，排版设计和内容风格可以搭配以下 Skill 使用（仅供参考）：\n\n| Skill | 用途 | 链接 |\n|-------|------|------|\n| **Anthropic Frontend Design** | 排版设计风格 — 生成高质量、有设计感的 HTML 排版，告别 AI 味 | [anthropics/skills/frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) |\n| **Khazix Skills** | 内容写作风格 — 公众号长文写作，个人风格化的内容输出 | [KKKKhazix/khazix-skills](https://github.com/KKKKhazix/khazix-skills) |\n\n```bash\n# 安装示例（Claude Code）\nclaude install-skill https://github.com/anthropics/skills/tree/main/skills/frontend-design\nclaude install-skill https://github.com/KKKKhazix/khazix-skills\n```\n\n\u003e 搭配使用：让 Khazix Skill 负责内容创作，Frontend Design Skill 负责排版风格，MBEditor 负责预览和发布到公众号。三者配合实现从写作到发布的全链路自动化。\n\n## 编辑器功能\n\n![预览模式](docs/screenshots/preview-v2.png)\n\n### 三种编辑模式\n\n| 模式 | 适合谁 | 能做什么 |\n|------|--------|---------|\n| **HTML 模式** | 设计师 / Agent | HTML + CSS + JS 三栏编辑，像素级控制每一个元素 |\n| **Markdown 模式** | 写作者 | 用最简洁的语法写作，多种排版主题自动渲染 |\n| **可视化编辑** | 所有人 | 所见即所得，在预览区直接编辑内容 |\n\n### 六种交互组件\n\n内置纯 CSS 交互模板，无需 JavaScript，100% 微信公众号兼容：\n\n- **展开收起** — FAQ、隐藏内容，点击标题展开\n- **前后对比** — 支持纯文字、纯图片、图文混合三种对比模式\n- **翻牌卡片** — 正反两面，点击翻转，适合知识点展示\n- **滑动轮播** — 触摸滑动 + 指示器切换，原生 scroll-snap\n- **渐显文字** — 滚动进入视口时逐行淡入\n- **长按揭秘** — 长按查看隐藏内容\n\n### 发布能力\n\n- 一键复制富文本到剪贴板\n- 一键推送到微信公众号草稿箱\n- 自动将本地/外部图片上传到微信 CDN\n- 自动生成文章封面图\n- CSS 自动内联化，标签自动转换为微信兼容格式\n\n## 排版示例\n\nMBEditor + AI 可以用自然语言生成任意风格的排版。\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\u003cstrong\u003e明亮清新\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\u003cstrong\u003e暗黑终端\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\" width=\"34%\"\u003e\u003cstrong\u003e报纸编辑部\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/preview.png\" alt=\"明亮清新\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/design-v1-terminal.png\" alt=\"暗黑终端\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/design-v2-newspaper.png\" alt=\"报纸编辑部\" /\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\u003cstrong\u003e霓虹赛博\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\u003cstrong\u003e大地暖色\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\" width=\"34%\"\u003e\u003cstrong\u003e瑞士极简\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/design-v3-neon.png\" alt=\"霓虹赛博\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/design-v4-earth.png\" alt=\"大地暖色\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"docs/screenshots/design-v5-swiss.png\" alt=\"瑞士极简\" /\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e 所有模板均为纯 inline style + `\u003csection\u003e` 标签，100% 微信兼容。你也可以用自然语言描述任意风格，AI 实时生成。\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e查看生成这些风格的提示词\u003c/strong\u003e\u003c/summary\u003e\n\n**明亮清新**\n```\n帮我写一篇推文，明亮清新风格。浅色渐变背景，彩色图标卡片，圆润友好。\n```\n\n**暗黑终端**\n```\n帮我写一篇推文，暗黑终端风格。纯黑背景，荧光绿主色，终端界面模拟，等宽字体。\n```\n\n**报纸编辑部**\n```\n帮我写一篇推文，复古报纸风格。奶油色背景，双线边框，衬线字体，新闻标签。\n```\n\n**霓虹赛博**\n```\n帮我写一篇推文，赛博朋克风格。深蓝背景，霓虹发光效果，等宽字体。\n```\n\n**大地暖色**\n```\n帮我写一篇推文，大地暖色风格。深棕背景，赤陶/沙色/森林绿搭配，手工匠人感。\n```\n\n**瑞士极简**\n```\n帮我写一篇推文，瑞士极简风格。纯白背景，纯黑文字，唯一彩色是红色色块。\n```\n\n你也可以完全自由发挥：\n```\n帮我写一篇推文，主题是 [你的主题]，风格是 [任意描述]\n```\n\n\u003c/details\u003e\n\n## 技术栈\n\n| 前端 | 后端 | 部署 |\n|------|------|------|\n| React 19 + TypeScript | FastAPI + Python | Docker Compose |\n| Tailwind CSS 4 | premailer (CSS 内联) | Nginx 反向代理 |\n| Monaco Editor | Pillow (图片处理) | 一键启动 |\n| 深色/浅色双主题 | 微信公众号 API | 端口 7073 |\n\n## API 参考\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003e完整 API 端点列表\u003c/strong\u003e\u003c/summary\u003e\n\n### 文章\n\n| 方法 | 端点 | 说明 |\n|------|------|------|\n| `POST` | `/api/v1/articles` | 创建文章 `{title, mode}` |\n| `GET` | `/api/v1/articles` | 列出所有文章 |\n| `GET` | `/api/v1/articles/{id}` | 获取文章详情 |\n| `PUT` | `/api/v1/articles/{id}` | 更新文章 `{html, css, js, markdown, title, mode}` |\n| `DELETE` | `/api/v1/articles/{id}` | 删除文章 |\n\n### 图片\n\n| 方法 | 端点 | 说明 |\n|------|------|------|\n| `POST` | `/api/v1/images/upload` | 上传图片（自动 MD5 去重） |\n| `GET` | `/api/v1/images` | 列出所有图片 |\n| `DELETE` | `/api/v1/images/{id}` | 删除图片 |\n\n### 发布\n\n| 方法 | 端点 | 说明 |\n|------|------|------|\n| `POST` | `/api/v1/publish/draft` | 推送到微信草稿箱 |\n| `POST` | `/api/v1/publish/preview` | 预览处理（CSS 内联化） |\n| `POST` | `/api/v1/publish/process` | 处理文章图片（上传到微信 CDN） |\n| `GET` | `/api/v1/publish/html/{id}` | 获取处理后的 HTML |\n\n### 配置\n\n| 方法 | 端点 | 说明 |\n|------|------|------|\n| `GET` | `/api/v1/config` | 查看配置状态 |\n| `PUT` | `/api/v1/config` | 设置微信 AppID / AppSecret |\n\n\u003c/details\u003e\n\n## 项目结构\n\n```\nmbeditor/\n├── frontend/              # React 19 + TypeScript + Tailwind 4\n│   └── src/\n│       ├── pages/         # 编辑器 / 文章列表 / 设置\n│       ├── components/    # Monaco 编辑器 / 预览 / 操作面板 / SVG 模板\n│       └── utils/         # Markdown 渲染 / HTML 提取 / SVG 模板引擎\n├── backend/               # FastAPI + Python\n│   └── app/\n│       ├── api/v1/        # REST API 路由\n│       └── services/      # 文章 / 图片 / 微信 API / 发布服务\n├── skill/                 # AI Agent Skill 定义\n│   └── mbeditor.skill.md  # Claude Code / Codex / OpenClaw 兼容\n├── docker-compose.yml     # 一键部署\n└── LICENSE                # MIT\n```\n\n## 本地开发\n\n```bash\n# 后端\ncd backend \u0026\u0026 pip install -r requirements.txt\nexport IMAGES_DIR=../data/images ARTICLES_DIR=../data/articles CONFIG_FILE=../data/config.json\nuvicorn app.main:app --reload --port 7072\n\n# 前端（新终端）\ncd frontend \u0026\u0026 npm install \u0026\u0026 npm run dev\n```\n\n## 贡献\n\n欢迎提交 [Issue](https://github.com/AAAAAnson/mbeditor/issues) 和 [Pull Request](https://github.com/AAAAAnson/mbeditor/pulls)。\n\n\u003ca href=\"https://github.com/AAAAAnson\"\u003e\n  \u003cimg src=\"https://github.com/AAAAAnson.png\" width=\"60\" style=\"border-radius:50%;\" alt=\"AAAAAnson\" /\u003e\n\u003c/a\u003e\n\n**[AAAAAnson](https://github.com/AAAAAnson)** — 创建者与维护者\n\n## 许可证\n\n[MIT](LICENSE) \u0026copy; 2025 Anson\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaaaanson%2Fmbeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaaaanson%2Fmbeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaaaanson%2Fmbeditor/lists"}