Mars-Editor-Web README

The project's README from github.com/whyubel1eve/Mars-Editor-Web. As one markdown file: README.md.

火星编辑器 (Mars Editor)

Markdown 写作,一键转成内联样式富文本,粘贴到微信公众号编辑器即可无损还原。

微信公众号编辑器会丢弃 class 与 <style>,只保留内联 style。本项目的主题系统因此不产出任何 CSS 类,只产出内联样式字符串,保证预览与粘贴结果一致。

功能

导入 / 导出

浏览器存储清掉就没了,所以草稿要能搬出去:

图片粘贴

图片以 data URI 内嵌,实测粘进公众号后台后原样保留 —— 带图文章不需要先传图床, 写完直接「复制到公众号」就行。

tools/wechat-paste-test.html 是当时用的实测页,四个用例(data URI 图片 / https 远程图片 / 图文混排 / 外链)各一个复制按钮,留着备用:微信哪天改了粘贴行为,复测一遍就知道。

技术栈

React 19 · TypeScript · Vite 7 · CodeMirror 6 · markdown-it · highlight.js

开发

npm install
npm run dev      # 开发服务器
npm run build    # 类型检查 + 生产构建
npm run preview  # 预览构建产物
npm run deploy   # 构建并发到 Cloudflare Pages(mars-editor.pages.dev)

发版

线上是 Cloudflare Pages 项目 mars-editor,直传部署,没有接 GitHub 自动构建 —— 推代码到 main 不会更新线上,必须跑一次:

npm run deploy

发完可以用 npx wrangler pages deployment list --project-name mars-editor 核对, 最新一条的 Source 应当是刚推上去的 commit。

Mars-Editor-Web (whyubel1eve/Mars-Editor-Web)

Searching Database…

What is this?Mars Editor is a Markdown writing tool that converts your draft into inline-style rich text with one click, so you can paste it directly into the WeChat official account (微信公众号) editor without losing formatting.
Is this a desktop app or something I use in the browser?It is a web app built with React, TypeScript and Vite, running entirely client-side (editing, preview and storage all happen in your browser).
How do I start writing with it?Write Markdown in the editor pane and watch it render live in the synced preview pane, then use the one-click copy button to get a WeChat-ready rich text block you can paste straight into the official account editor.
Do I need a backend or any API keys to use it?No backend or API keys are needed — it runs fully client-side, and even zip reading/writing for backups is implemented without third-party libraries, using the browser's native CompressionStream.
Why does the theme system only produce inline styles instead of CSS classes?Because the WeChat official account editor strips out class attributes and style tags on paste, keeping only inline styles, so Mars Editor's theme system is designed to output nothing but inline style strings to guarantee the preview matches what actually survives pasting.
Do I need to upload images to an image host first?No — images are embedded as data URIs, and testing shows they survive unchanged once pasted into the WeChat backend editor, so you can write and copy without a separate image host.
What export formats are supported?You can export the current draft as plain .md, export all drafts as a .zip backup (drafts plus original images and a manifest.json), or export the rendered post as a single 750px-wide long .png image.
How does the editor handle themes and layout density?It ships multiple built-in light/dark paper themes you can switch between, plus three spacing density presets (compact/standard/loose), with 'standard' matching each theme's original design.
Size
0.1 MB
Stars
194
Updated
CommitSep 10
Age
2mo
Commits · 90 Days