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

这两年一直在深耕 AI Agent 与大模型应用，比如 JitKnow AI 知识库、JitWord协同AI文档、Pxcharts 超级表格，同时也在持续和大家分享 GitHub 上真正能落地、能解决实际问题的优质AI开源项目。

最近基于 JitWord 协同AI文档SDK，我写了一款开源的公众号编辑器------wx-editor。

项目简介

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

它比较适合如何群体：

公众号创作者：快速生成标题、摘要、大纲、续写内容，并一键排版。
新媒体编辑：统一文章风格，减少复制到公众号后台后的样式丢失。
品牌运营团队：沉淀固定主题、样式块和内容模板。
知识型内容团队：编辑长文、教程、代码块、图文内容，并保留版本快照。

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

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

wx-editor：github.com/jitOffice/w...

JitWord SDK：github.com/jitOffice/j...

为什么做这个项目

写这个工具，其实并不是要代替市面上已有的微信排版工具，而是基于程序员内容创作的角度，能把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 功能。

功能一览

模块	能力
创作工作台	三栏式布局、标题编辑、保存状态、字数统计、GitHub 链接
编辑器	JitWord SDK、本地降级编辑器、HTML 插入、图片粘贴/拖拽/上传
AI 助手	润色、续写、标题、摘要、大纲、排版建议、样式化插入
样式中心	主题切换、样式块插入、分割线、引用、代码块、卡片布局
微信预览	移动端公众号预览、主题实时同步、兼容问题提示
导出复制	HTML 清洗、样式内联、本地图片检测、复制到剪贴板
图片处理	ImgBB、自定义图床、base64 兜底、SDK 默认上传拦截
数据管理	Pinia 状态、本地草稿、版本快照、IndexedDB 持久化

技术栈

类型	技术
前端框架	Vue 3、Composition API、`<script setup>`
构建工具	Vite 5
类型系统	TypeScript 5
状态管理	Pinia
富文本编辑	JitWord SDK 本地化集成 + 原生降级编辑器
样式方案	全局 CSS、主题预设、微信兼容内联样式
测试框架	Vitest、jsdom
存储方案	IndexedDB、localStorage

本地部署教程

环境要求

建议使用：

Node.js 18+
npm 9+

安装依赖

复制代码

npm install

启动开发服务

arduino 复制代码

npm run dev

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

bash 复制代码

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

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

运行测试

arduino 复制代码

npm run test

生产构建

arduino 复制代码

npm run build

构建产物会输出到：

复制代码

wx-editor/

预览构建产物

arduino 复制代码

npm run preview

预览时同样访问：

bash 复制代码

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

环境变量介绍

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

AI 配置

变量名	说明	默认值
`VITE_DEEPSEEK_API_KEY`	DeepSeek API Key	空
`VITE_DEEPSEEK_API_BASE`	OpenAI-compatible API 地址	`https://api.deepseek.com/chat/completions`
`VITE_DEEPSEEK_MODEL`	模型名称	`deepseek-chat`

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

图片上传配置

变量名	说明	默认值
`VITE_IMGBB_API_KEY`	ImgBB API Key	空
`VITE_IMAGE_UPLOAD_ENDPOINT`	自定义图片上传接口	空
`VITE_IMAGE_UPLOAD_FIELD`	自定义上传接口的文件字段名	`file`

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

目录结构

bash 复制代码

.
├── 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                           # 产品需求与技术方案

核心架构

css 复制代码

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 实现了统一图片上传入口：

bash 复制代码

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

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

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

真实大模型流式输出：增强 AI 助手交互体验。
更多公众号组件：二维码、作者卡片、封面图、产品卡片、活动 CTA。
素材库管理：复用品牌图片、固定文案和模板。
版本对比：支持 AI 修改前后差异查看。
团队协作：结合 JitWord 协同能力，探索多人编辑和团队空间。
更强微信兼容测试：覆盖更多公众号后台复制粘贴场景。

贡献指南

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

新增公众号样式块和主题。
改进微信兼容导出规则。
优化 JitWord SDK 适配层。
增强 AI Prompt 与结果插入体验。
增加更多单元测试。

本项目基于JitWord 协同AI文档引擎开源版构建。

开源地址：

wx-editor：github.com/jitOffice/w...

JitWord SDK：github.com/jitOffice/j...

后续会基于 jitword 打造更有价值的AI文档产品和工具，如果大家有好的想法和建议，欢迎随时留言区交流反馈～