跪拜 Guibai
← Back to the summary

An Open-Source AI Editor That Fixes the Markdown-to-WeChat Formatting Nightmare

Over the past two years, I have been deeply involved in AI Agents and large model applications, such as the JitKnow AI knowledge base, JitWord collaborative AI documents, and Pxcharts super tables. At the same time, I have been continuously sharing high-quality, practical AI open-source projects from GitHub that can truly be implemented and solve real problems.

Recently, based on the JitWord collaborative AI document SDK, I wrote an open-source WeChat Official Account editor — wx-editor.

Image

Project Introduction

The WeChat Article AI Editor is a content creation workbench for WeChat Official Accounts built with Vue 3 + Vite + TypeScript + Pinia + JitWord SDK. It integrates AI-assisted creation, rich text editing, style block layout, theme switching, mobile preview, WeChat-compatible export, image upload processing, and local draft management into a single lightweight front-end application.

Image

It is suitable for the following groups:

Of course, this project still has many areas for optimization, and I look forward to everyone's contributions.

Without further ado, here are the open-source addresses:

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

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

Why This Project Was Made

Writing this tool is not actually to replace the existing WeChat formatting tools on the market, but from the perspective of a programmer creating content, to be able to convert Markdown technical articles into technical articles that display well on WeChat Official Accounts with one click, while also supporting multiple theme switches to meet the preferences of different technical bloggers.

Image

The document editing part is implemented based on JitWord, with WeChat Official Account scenario capabilities added on top. The goal is to allow creators to complete the following in one workbench:

Draft Article → AI Assistance → Rich Text Editing → Theme Formatting → Preview Check → Copy to Official Account Backend

Core Highlights

AI Writing Assistant

Image

Supports inserting AI results into the editor as structured rich text, and provides style wrappers such as information cards, key quotes, tips/reminders, step checklists, and summary cards.

JitWord Rich Text Editor Integration

Image

WeChat Official Account Style Blocks and Theme System

Image

WeChat-Compatible Export

Image

Dual-Mode Image Upload Strategy

Image

The project has a built-in image upload strategy that balances local editing experience and WeChat Official Account publishing compatibility:

Local-First Data Management

Feature Overview

Module Capabilities
Creation Workbench Three-column layout, title editing, save status, word count, GitHub link
Editor JitWord SDK, local fallback editor, HTML insertion, image paste/drag/upload
AI Assistant Polish, continue writing, titles, summaries, outlines, formatting suggestions, styled insertion
Style Center Theme switching, style block insertion, dividers, quotes, code blocks, card layouts
WeChat Preview Mobile Official Account preview, real-time theme sync, compatibility issue tips
Export & Copy HTML cleaning, style inlining, local image detection, copy to clipboard
Image Processing ImgBB, custom image hosting, base64 fallback, SDK default upload interception
Data Management Pinia state, local drafts, version snapshots, IndexedDB persistence

Tech Stack

Type Technology
Frontend Framework Vue 3, Composition API, <script setup>
Build Tool Vite 5
Type System TypeScript 5
State Management Pinia
Rich Text Editing JitWord SDK localized integration + native fallback editor
Styling Solution Global CSS, theme presets, WeChat-compatible inline styles
Testing Framework Vitest, jsdom
Storage Solution IndexedDB, localStorage

Local Deployment Tutorial

Environment Requirements

Recommended:

Install Dependencies

npm install

Start Development Server

npm run dev

Since the project base path is configured as /wx-editor/, please access the development environment at:

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

If Vite automatically assigns a different port, please refer to the terminal output and keep the access path as /wx-editor/.

Run Tests

npm run test

Production Build

npm run build

The build output will be in:

wx-editor/

Preview Build Artifacts

npm run preview

When previewing, also access:

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

Environment Variables Introduction

The following variables can be configured in .env or on the deployment platform.

AI Configuration

Variable Name Description Default Value
VITE_DEEPSEEK_API_KEY DeepSeek API Key Empty
VITE_DEEPSEEK_API_BASE OpenAI-compatible API address https://api.deepseek.com/chat/completions
VITE_DEEPSEEK_MODEL Model name deepseek-chat

Note: If the API Key is not configured, the AI service will use local mock output, making it convenient to experience the product flow in an environment without a backend.

Image Upload Configuration

Variable Name Description Default Value
VITE_IMGBB_API_KEY ImgBB API Key Empty
VITE_IMAGE_UPLOAD_ENDPOINT Custom image upload interface Empty
VITE_IMAGE_UPLOAD_FIELD File field name for the custom upload interface file

The custom upload interface needs to support multipart/form-data and return a parsable image URL. The project is compatible with common return structures, such as url, data.url, data.display_url, etc.

Directory Structure

.
├── public/
│   └── vendor/jitword/              # JitWord local SDK resources
├── scripts/
│   └── download-jitword-assets.mjs  # JitWord resource download script
├── src/
│   ├── components/                  # Workbench components
│   │   ├── EditorShell.vue          # Main editor area
│   │   ├── RightPanel.vue           # AI, preview, version, configuration panels
│   │   └── SidebarPanel.vue         # Theme, style block, draft entry
│   ├── data/
│   │   ├── blockTemplates.ts        # Style block templates
│   │   └── themePresets.ts          # WeChat Official Account theme presets
│   ├── services/
│   │   ├── aiService.ts             # AI commands and content generation
│   │   ├── editorCommands.ts        # Editor command encapsulation
│   │   ├── imageHostingService.ts   # Image upload and base64 fallback
│   │   ├── indexedDbStorage.ts      # IndexedDB storage
│   │   ├── jitwordAdapter.ts        # JitWord SDK adapter layer
│   │   ├── runtimeConfig.ts         # Runtime configuration read/write
│   │   └── wechatExporter.ts        # WeChat-compatible export engine
│   ├── stores/
│   │   └── articleStore.ts          # Draft, version, theme state
│   ├── App.vue                      # Application shell
│   ├── main.ts                      # Application entry
│   ├── styles.css                   # Global styles
│   └── types.ts                     # Shared type definitions
├── tests/                           # Unit tests
│   ├── aiService.test.ts
│   ├── imageHostingService.test.ts
│   └── wechatExporter.test.ts
├── wx-editor/                       # Build output directory
├── vite.config.ts                   # Vite configuration
├── package.json
└── prd.md                           # Product requirements and technical plan

Core Architecture

graph TD
  User["Creator"] --> App["Vue App"]
  App --> Editor["JitWord Adapter Layer"]
  App --> Store["Pinia State"]
  App --> AI["AI Service"]
  App --> Exporter["WeChat Export Engine"]
  Store --> Storage["IndexedDB / localStorage"]
  AI --> Model["DeepSeek / OpenAI-compatible API"]
  Exporter --> Clipboard["Clipboard / Official Account Backend"]
  Editor --> Image["Image Upload / base64 Fallback"]

Editor Adapter Layer

src/services/jitwordAdapter.ts is the core adapter layer of the project, responsible for:

WeChat Export Engine

src/services/wechatExporter.ts is responsible for converting editor content into HTML more suitable for pasting into the WeChat Official Account backend:

Image Upload Strategy

src/services/imageHostingService.ts implements a unified image upload entry:

Select Image
 ↓
Is image hosting configured?
 ├─ Yes: Upload to custom interface or ImgBB
 │    ├─ Success: Use HTTPS URL
 │    └─ Failure: Fallback to base64 within the editor
 └─ No: Directly convert to base64, no request sent

This ensures smooth image insertion during local development and in environments without a backend, while still allowing conversion to online URLs via image hosting configuration before copying to the Official Account.

Future Iteration Roadmap (for reference)

Contribution Guide

Image

Issues and Pull Requests are welcome. It is recommended to focus on the following directions before contributing:

This project is built based on the open-source version of the JitWord collaborative AI document engine.

Open Source Addresses:

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

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

In the future, more valuable AI document products and tools will be built based on jitword. If you have any good ideas or suggestions, feel free to leave a comment in the message area for discussion~