花了3天,我写了一款开源AI公众号编辑器

项目简介

微信文章 AI 编辑器 是一个基于 Vue 3 + Vite + TypeScript + Pinia + JitWord SDK 构建的微信公众号内容创作工作台。它把公众号写作流程中的 AI 辅助创作、富文本编辑、样式块排版、主题切换、移动端预览、微信兼容导出、图片上传处理、本地草稿管理 集成到一个轻量前端应用中。

它比较适合如何群体：

• 公众号创作者：快速生成标题、摘要、大纲、续写内容，并一键排版。

• 新媒体编辑：统一文章风格，减少复制到公众号后台后的样式丢失。

• 品牌运营团队：沉淀固定主题、样式块和内容模板。

• 知识型内容团队：编辑长文、教程、代码块、图文内容，并保留版本快照。

当然这个项目还有很多优化的地方，期待大家共建。

话不多说，先上开源地址：

wx-editor：https://github.com/jitOffice/wx-editor

JitWord SDK：https://github.com/jitOffice/jitword-sdk

为什么做这个项目

写这个工具，其实并不是要代替市面上已有的微信排版工具，而是基于程序员内容创作的角度，能把md的技术文章，一键转换成可以在公众号良好展现的技术文章，同时支持多主题切换，满足不同技术博主的喜好。

文档编辑部分基于 JitWord 实现，叠加公众号场景能力，目标是让创作者在一个工作台里完成：

构思文章 → AI 辅助 → 富文本编辑 → 主题排版 → 预览检查 → 复制到公众号后台

核心亮点

AI 写作助手

支持 AI 结果以结构化富文本方式插入编辑器，并提供信息卡片、重点引言、提示提醒、步骤清单、总结卡片等样式包装。

JitWord 富文本编辑器集成

• 默认加载本地化 JitWord SDK 产物。

• 支持 JitWord 初始化失败时自动降级到基础 contenteditable 编辑器。

• 通过 EditorAdapter 隔离 SDK 初始化、内容读写、插入 HTML、销毁生命周期等差异。

• 针对第三方 SDK 内部图片上传默认端点做了兼容处理，避免本地开发出现 /upload/free 404。

公众号样式块与主题系统

• 内置公众号常用样式块：卡片、引言、提示、步骤、总结、分割线、代码块等。

• 支持主题切换，预览与编辑内容保持一致。

• 样式块以微信兼容的 HTML 和内联样式为核心，减少复制后的样式丢失。

• Markdown 分割线语法 ---、***、___ 会自动映射为编辑器支持的分割线。

微信兼容导出

• HTML 清洗与安全过滤。

• 样式内联，适配公众号后台粘贴场景。

• 自动补齐公众号常见兼容样式。

• 发布前检查非 HTTPS 链接、本地图片等潜在问题。

• 一键复制到公众号后台，优先使用 Clipboard API，失败时自动降级。

图片上传双模策略

项目内置图片上传策略，兼顾本地编辑体验和公众号发布兼容：

• 配置了图床：上传到 ImgBB 或自定义图床接口，返回线上 HTTPS 图片链接。

• 未配置图床：编辑器内默认转为 base64 插入，不发起任何远程请求，避免本地 404。

• 上传失败：编辑器内自动降级为 base64，保证用户编辑不中断。

• 复制到公众号前：若检测到 base64/blob 本地图片，会要求配置图床并转为线上 URL，以保证公众号后台可正常显示。

本地优先的数据管理

• 本地草稿自动保存。

• IndexedDB 持久化文章内容。

• localStorage 保存 AI 与图床配置。

• 支持版本快照，降低误操作风险。

• 不依赖后端即可完整运行 MVP 功能。

功能一览

技术栈

本地部署教程

环境要求

建议使用：

• Node.js 18+

• npm 9+

安装依赖

npm install

启动开发服务

npm run dev

由于项目基础路径配置为 /wx-editor/，开发环境请访问：

http://localhost:5173/wx-editor/

如果 Vite 自动分配了其他端口，请以终端输出为准，并保持访问路径为 /wx-editor/。

运行测试

npm run test

生产构建

npm run build

构建产物会输出到：

wx-editor/

预览构建产物

npm run preview

预览时同样访问：

http://localhost:4173/wx-editor/

环境变量介绍

可以在 .env 或部署平台中配置以下变量。

AI 配置

说明：如果未配置 API Key，AI 服务会使用本地模拟输出，方便无后端环境下体验产品流程。

图片上传配置

自定义上传接口需支持 multipart/form-data，并返回可解析的图片 URL。项目会兼容常见返回结构，如 url、data.url、data.display_url 等。

目录结构

.├── public/│   └── vendor/jitword/              # JitWord 本地 SDK 资源├── scripts/│   └── download-jitword-assets.mjs  # JitWord 资源下载脚本├── src/│   ├── components/                  # 工作台组件│   │   ├── EditorShell.vue          # 编辑器主区域│   │   ├── RightPanel.vue           # AI、预览、版本、配置面板│   │   └── SidebarPanel.vue         # 主题、样式块、草稿入口│   ├── data/│   │   ├── blockTemplates.ts        # 样式块模板│   │   └── themePresets.ts          # 公众号主题预设│   ├── services/│   │   ├── aiService.ts             # AI 指令与内容生成│   │   ├── editorCommands.ts        # 编辑器命令封装│   │   ├── imageHostingService.ts   # 图片上传与 base64 兜底│   │   ├── indexedDbStorage.ts      # IndexedDB 存储│   │   ├── jitwordAdapter.ts        # JitWord SDK 适配层│   │   ├── runtimeConfig.ts         # 运行时配置读写│   │   └── wechatExporter.ts        # 微信兼容导出引擎│   ├── stores/│   │   └── articleStore.ts          # 草稿、版本、主题状态│   ├── App.vue                      # 应用外壳│   ├── main.ts                      # 应用入口│   ├── styles.css                   # 全局样式│   └── types.ts                     # 共享类型定义├── tests/                           # 单元测试│   ├── aiService.test.ts│   ├── imageHostingService.test.ts│   └── wechatExporter.test.ts├── wx-editor/                       # 构建输出目录├── vite.config.ts                   # Vite 配置├── package.json└── prd.md                           # 产品需求与技术方案

核心架构

graph TD  User["创作者"] --> App["Vue 应用"]  App --> Editor["JitWord 适配层"]  App --> Store["Pinia 状态"]  App --> AI["AI 服务"]  App --> Exporter["微信导出引擎"]  Store --> Storage["IndexedDB / localStorage"]  AI --> Model["DeepSeek / OpenAI-compatible API"]  Exporter --> Clipboard["剪贴板 / 公众号后台"]  Editor --> Image["图片上传 / base64 兜底"]

编辑器适配层

src/services/jitwordAdapter.ts 是项目的核心适配层，负责：

• 加载 JitWord 脚本和样式。

• 查找 JitWord 全局变量并初始化编辑器。

• 统一 getHTML、setHTML、insertHTML、destroy 等编辑器 API。

• 绑定粘贴、拖拽、文件选择图片上传。

• 拦截 JitWord 内置上传按钮默认请求 /upload/free 的行为。

• 在 SDK 加载失败或渲染异常时降级为基础编辑器。

微信导出引擎

src/services/wechatExporter.ts 负责把编辑器内容转换为更适合公众号后台粘贴的 HTML：

• 清洗危险标签与属性。

• 保留安全的 data:image/*;base64 图片。

• 为标题、段落、引用、代码块、分割线等补齐微信兼容样式。

• 去除会阻碍主题切换的旧内联颜色。

• 检查本地图片、非 HTTPS 链接等发布风险。

图片上传策略

src/services/imageHostingService.ts 实现了统一图片上传入口：

选择图片  ↓是否配置图床？  ├─ 是：上传到自定义接口或 ImgBB  │    ├─ 成功：使用 HTTPS URL  │    └─ 失败：编辑器内 fallback 为 base64  └─ 否：直接转 base64，不发请求

这保证了本地开发和无后端环境下也能顺畅插入图片，同时在复制到公众号前仍能通过图床配置转为线上 URL。

后续迭代路线图（大家可以参考一下）

• 真实大模型流式输出：增强 AI 助手交互体验。

• 更多公众号组件：二维码、作者卡片、封面图、产品卡片、活动 CTA。

• 素材库管理：复用品牌图片、固定文案和模板。

• 版本对比：支持 AI 修改前后差异查看。

• 团队协作：结合 JitWord 协同能力，探索多人编辑和团队空间。

• 更强微信兼容测试：覆盖更多公众号后台复制粘贴场景。

贡献指南

欢迎提交 Issue 和 Pull Request。建议贡献前先关注以下方向：

• 新增公众号样式块和主题。

• 改进微信兼容导出规则。

• 优化 JitWord SDK 适配层。

• 增强 AI Prompt 与结果插入体验。

• 增加更多单元测试。

插入一条小广告

Github介绍：https://github.com/MrXujiang/ai-book

先暂时聊这么多，后续会持续分享AI创业开源笔记，欢迎留言交流 ～