把开源 Markdown 编辑器搬到 Cloudflare Pages:零成本、自带域名
如果你习惯用 Markdown 写东西,大概率被公众号后台折磨过:标题、引用、代码块在编辑器里好好的,一粘贴进去样式全没了,图片还得一张张重新传。
Mars Editor 就是专门解决这件事的:它是一个纯前端的 Markdown 编辑器,把 Markdown 实时渲染成公众号能直接吃的富文本,复制粘贴即可,不需要服务器、不需要数据库,部署到 Cloudflare Pages 就能白嫖一个属于你自己的在线编辑器。

它到底解决了什么问题
公众号后台的编辑器对样式非常挑剔。网页里最常见的三种东西——class 类名、外部 CSS 文件、 标签——粘进去之后经常被直接过滤掉,这也是为什么很多排版工具导出的内容在预览里好看、进了后台就崩。
Mars Editor 的思路很直接:把样式写成内联 style,不用类、不用外部样式表,颜色字号行距全部落到每个 HTML 标签自己身上。这样富文本被复制进公众号后台时,样式是跟着元素一起走的,还原度自然高得多。
具体能力上,它目前支持:
- Markdown 实时预览,边写边看
- 编辑区与预览区滚动同步
- 多套公众号排版主题
- 紧凑 / 标准 / 宽松三档排版密度
- 一键复制为公众号可用富文本
- 图片本地存储,支持粘贴与拖拽
- 代码高亮、脚注、
==高亮==等扩展语法 - 导入 Markdown、导出 Markdown、导出备份 zip、导出长图
这不是一个「只能转标题和正文」的一次性转换器,而是可以长期自用的写作工作台——写完直接复制,或者导出长图、打包备份都行。
为什么它适合扔到 Cloudflare Pages
Mars Editor 是 React + TypeScript + Vite 项目,npm run build 之后的产物就是一堆静态文件。这类项目和 Cloudflare Pages 是天作之合:
- 不需要服务器,静态托管即可
- 不需要数据库,数据都在浏览器本地
- HTTPS 不用自己配,Cloudflare 默认给
- 构建产物上传
dist目录就行,支持 Direct Upload - 部署完自动拿到一个
pages.dev地址,立刻能访问 - 后续更新一条命令重新发布
换句话说,除了域名之外,你几乎不需要为它付出任何运行成本。
第一步:Fork 仓库
到 GitHub 搜索 Mars Editor,找到原作者仓库后 Fork 一份到自己账号下,再 clone 到本地,后面改主题、提交更新都在这份代码上进行。

第二步:在 Cloudflare 创建 Pages 项目
登录 Cloudflare 控制台,进入 Workers & Pages,新建一个 Pages 项目。项目的构建配置在下一步填即可,这一步主要是把项目壳子建出来。

第三步:构建并部署
项目根目录执行构建命令:
1 | npm run build |
产物默认输出到 dist。然后用 Wrangler 直接上传:
1 | npx wrangler deploy |
也可以在 Cloudflare Pages 里连接 GitHub 仓库做自动构建,但对这种小工具来说,本地构建 + Direct Upload 反而更省事:想更新就重新跑一遍这两条命令。

第四步:绑定自己的域名
部署完成后你会先拿到一个 xxx.pages.dev 的临时地址,能用,但不好记。在 Pages 项目的自定义域名里加上自己的域名(需要先托管在 Cloudflare),解析会自动配好。

绑完之后,你就拥有了一个完全自己掌控的公众号 Markdown 编辑器:地址自己定,主题自己改,什么时候更新自己说了算。
写在最后
很多工具不是不能用,而是不够「属于自己」——哪天第三方跑路、改版、加广告,你的写作流程就得跟着重来。像 Mars Editor 这种开源小工具,最舒服的用法就是部署一份自己的:一次部署,长期可用。
如果你平时用 Markdown 写公众号,值得花十分钟部署一次,至少能省掉每次排版的那段烦躁时间。
相关链接
- Cloudflare Pages Direct Upload 文档:https://developers.cloudflare.com/pages/get-started/direct-upload/
- Cloudflare Pages 部署 Vite 项目:https://developers.cloudflare.com/pages/framework-guides/deploy-a-vite3-project/
- Wrangler Pages 命令文档:https://developers.cloudflare.com/workers/wrangler/commands/pages/
Markdown 写作,一键转成内联样式富文本,粘贴到微信公众号编辑器即可无损还原。





