微信文章 AI 编辑器

面向微信公众号创作者的 AI 写作、智能排版与微信兼容发布工作台

项目简介

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

它适合：

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

为什么做这个项目

微信公众号创作通常需要在多个工具之间来回切换：选题、写作、AI 润色、排版、预览、图片处理、复制到公众号后台。传统编辑器解决了「写」的问题，但在 AI 创作、公众号兼容、品牌排版、图片上传、草稿恢复 等环节仍有明显断点。

本项目基于 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

启动开发服务

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/

部署说明

项目已配置为部署在 /wx-editor/ 子路径下：

// vite.config.ts
export default defineConfig({
  base: '/wx-editor/',
  build: {
    outDir: 'wx-editor'
  }
});

部署步骤

执行构建：

npm run build

将生成的 wx-editor/ 目录发布到服务器的 /wx-editor/ 路径下。
确保以下资源能正常访问：

/wx-editor/index.html
/wx-editor/assets/...
/wx-editor/vendor/jitword/...

Nginx 配置示例

location /wx-editor/ {
  alias /your/deploy/path/wx-editor/;
  try_files $uri $uri/ /wx-editor/index.html;
}

如果你的站点根目录已经直接包含 wx-editor/ 文件夹，也可以使用：

location /wx-editor/ {
  root /your/deploy/path;
  try_files $uri $uri/ /wx-editor/index.html;
}

环境变量

可以在 .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 等。

JitWord SDK 配置

变量名	说明	默认值
`VITE_JITWORD_SCRIPT_URL`	单个 JitWord 脚本地址，兼容旧配置	空
`VITE_JITWORD_SCRIPT_URLS`	JitWord 脚本地址列表，逗号分隔	内置本地路径列表
`VITE_JITWORD_STYLE_URLS`	JitWord 样式地址列表，逗号分隔	`arco.css,px-editor.css`
`VITE_JITWORD_GLOBAL_NAMES`	JitWord 全局变量名列表	`PxEditor,JitWord,Jitword,JitWordSDK,JitOffice`
`VITE_JITWORD_AUTO_LOAD`	是否自动加载 JitWord 资源	`true`

项目会通过 import.meta.env.BASE_URL 自动拼接本地资源路径，因此部署到 /wx-editor/ 后，默认会从 /wx-editor/vendor/jitword/... 加载 JitWord 资源。

JitWord 本地资源

项目默认从以下目录加载 JitWord SDK 资源：

public/vendor/jitword/
  arco.css
  px-editor.css
  vue.global.prod.js
  arco-vue.min.js
  arco-vue-icon.min.js
  echarts.min.js
  mind-elixir.js
  px-editor.standalone.js
  vendor/
    exceljs.min.js
    vue-demi.iife.js
    vue-office-pptx.umd.js

如需重新拉取 JitWord 官方产物，可运行：

npm run download:jitword

默认脚本加载顺序：

vue.global.prod.js
arco-vue.min.js
arco-vue-icon.min.js
echarts.min.js
mind-elixir.js
vendor/exceljs.min.js
vendor/vue-demi.iife.js
px-editor.standalone.js

vendor/vue-office-pptx.umd.js 已下载备用，但默认不加载，以避免部分浏览器环境中的 process 兼容问题。

目录结构

.
├── 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 Markdown 与分割线转换。
图片上传配置、图床失败、base64 fallback。
微信导出清洗、样式内联、base64 图片保留、主题一致性。

运行：

npm run test

构建验证：

npm run build

常见问题

为什么访问根路径看不到页面？

项目已设置 base: '/wx-editor/'，请访问 /wx-editor/。这是为了匹配 GitHub Pages 或子路径部署场景。

为什么未配置图床时图片仍能显示？

编辑器内会自动将图片转为 base64 插入，保证本地创作体验不中断。但公众号后台通常不适合直接使用 base64 图片，复制前建议配置 ImgBB 或自定义图床。

为什么复制到公众号前提示配置图床？

公众号后台需要可访问的线上图片 URL。若文章中仍存在 base64/blob 本地图片，系统会要求先配置图床并自动上传替换。

JitWord 加载失败怎么办？

项目会自动降级到基础编辑器，保证内容仍可编辑。请检查 public/vendor/jitword/ 是否存在 SDK 资源，或运行：

npm run download:jitword

如何部署到 GitHub Pages？

当前项目已经面向 /wx-editor/ 子路径配置。你可以构建后将 wx-editor/ 目录内容部署到仓库 Pages 对应路径。若使用 GitHub Actions，可将构建产物 wx-editor/ 作为发布目录。

路线图

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

贡献指南

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

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

本项目遵循轻量、少依赖、前端优先的实现原则。提交代码前建议运行：

npm run test
npm run build

许可证

本项目基于 GNU General Public License v3.0 开源。

微信文章 AI 编辑器

基于 Vue 3 + Vite + TypeScript 的微信公众号 AI 编辑器 MVP，围绕 JitWord SDK 适配、AI 写作辅助、公众号样式块、微信兼容导出和本地草稿管理实现基础闭环。

当前能力

三栏式公众号创作工作台。
JitWord SDK 本地产物加载适配层，默认从 public/vendor/jitword/ 加载，失败时提供 contenteditable 降级编辑器。
本地草稿、自动保存、版本快照。
AI 润色、续写、标题、摘要、大纲、排版建议的模拟链路。
公众号主题、样式块、移动端预览。
HTML 清洗、样式内联、兼容检查和复制到公众号。
Vitest 覆盖导出引擎核心逻辑。

本地运行

npm install
npm run dev

验证

npm run test
npm run build

JitWord SDK 接入说明

JitWord 开源版可按“GitHub/CDN 产物本地化”的方式接入，不需要默认安装 npm 包。

推荐目录：

public/vendor/jitword/
  arco.css
  px-editor.css
  vue.global.prod.js
  arco-vue.min.js
  arco-vue-icon.min.js
  echarts.min.js
  mind-elixir.js
  px-editor.standalone.js
  vendor/
    exceljs.min.js
    vue-demi.iife.js
    vue-office-pptx.umd.js  # 已下载备用，默认不加载，避免浏览器 process 兼容问题

默认加载规则位于 src/services/jitwordAdapter.ts：

脚本地址：默认按官方 README 顺序依次加载 vue.global.prod.js、arco-vue.min.js、arco-vue-icon.min.js、echarts.min.js、mind-elixir.js、vendor/exceljs.min.js、vendor/vue-demi.iife.js、px-editor.standalone.js，可用 VITE_JITWORD_SCRIPT_URLS 逗号分隔覆盖；兼容保留 VITE_JITWORD_SCRIPT_URL。vendor/vue-office-pptx.umd.js 已下载备用，但不默认加载。
样式地址：默认加载 arco.css 和 px-editor.css，可用 VITE_JITWORD_STYLE_URLS 逗号分隔覆盖。
全局变量：默认依次查找 PxEditor、JitWord、Jitword、JitWordSDK、JitOffice，可用 VITE_JITWORD_GLOBAL_NAMES 覆盖。官方示例入口为 window.PxEditor.Jitword。
自动加载：默认开启，可用 VITE_JITWORD_AUTO_LOAD=false 关闭。

如需重新拉取官方产物，可运行：

npm run download:jitword

业务组件仍通过 EditorAdapter 统一调用编辑器能力。这样做不是为了把 JitWord 抽象成可替换编辑器，而是为了隔离本地 SDK 的初始化方式、全局变量名称、内容读写 API、版本升级差异和失败兜底逻辑。后续只需要在 src/services/jitwordAdapter.ts 中补齐真实 JitWord API 映射，EditorShell.vue、AI、草稿、导出模块都不需要跟着改。

关键目录

src/components        工作台 Vue 组件
src/data              公众号主题与样式块配置
src/services          JitWord 适配、AI 服务、微信导出引擎
src/stores            Pinia 草稿与版本状态
tests                 导出引擎测试

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.qoder/repowiki		.qoder/repowiki
.vscode		.vscode
public/vendor/jitword		public/vendor/jitword
scripts		scripts
src		src
tests		tests
wx-editor		wx-editor
.DS_Store		.DS_Store
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
demo.jpg		demo.jpg
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
prd.md		prd.md
prd.original.md		prd.original.md
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

微信文章 AI 编辑器

项目简介

为什么做这个项目

核心亮点

AI 写作助手

JitWord 富文本编辑器集成

公众号样式块与主题系统

微信兼容导出

图片上传双模策略

本地优先的数据管理

功能一览

技术栈

快速开始

环境要求

安装依赖

启动开发服务

运行测试

生产构建

预览构建产物

部署说明

部署步骤

Nginx 配置示例

环境变量

AI 配置

图片上传配置

JitWord SDK 配置

JitWord 本地资源

目录结构

核心架构

编辑器适配层

微信导出引擎

图片上传策略

测试

常见问题

为什么访问根路径看不到页面？

为什么未配置图床时图片仍能显示？

为什么复制到公众号前提示配置图床？

JitWord 加载失败怎么办？

如何部署到 GitHub Pages？

路线图

贡献指南

许可证

相关链接

微信文章 AI 编辑器

当前能力

本地运行

验证

JitWord SDK 接入说明

关键目录

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages