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…

这是什么?Mars Editor 是一款 Markdown 写作工具,一键把你的草稿转换成内联样式的富文本,让你可以直接粘贴到微信公众号编辑器而不丢失格式。
这是桌面应用,还是在浏览器里用的东西?它是一个用 React、TypeScript 和 Vite 构建的 Web 应用,完全在客户端运行(编辑、预览和存储都发生在你的浏览器里)。
怎么用它开始写作?在编辑窗格中写 Markdown,同步预览窗格会实时渲染,然后点击一键复制按钮,得到适配微信的富文本块,直接粘贴到公众号编辑器即可。
用它需要后端或 API 密钥吗?不需要后端,也不需要 API 密钥——它完全在客户端运行,就连备份用的 zip 读写也没有借助第三方库,而是用浏览器原生的 CompressionStream 实现。
为什么主题系统只生成内联样式而不生成 CSS 类?因为微信公众号编辑器在粘贴时会剔除 class 属性和 style 标签,只保留内联样式,所以 Mars Editor 的主题系统被设计为只输出内联样式字符串,以保证预览与粘贴后真正保留的效果一致。
我需要先把图片上传到图床吗?不需要——图片以 data URI 形式嵌入,测试表明粘贴到微信后台编辑器后能原样保留,因此无需单独的图床即可写作和复制。
支持哪些导出格式?可以把当前草稿导出为纯 .md,把全部草稿导出为 .zip 备份(草稿加原始图片和 manifest.json),或把渲染后的文章导出为一张 750px 宽的 .png 长图。
编辑器如何处理主题和排版密度?它内置多套可切换的浅色/深色纸张主题,另有三档间距密度预设(紧凑/标准/宽松),其中“标准”与每个主题的原始设计一致。
Size
0.1 MB
Stars
194
Updated
CommitSep 10
Age
1mo
Commits · 90 Days