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, который одним кликом превращает черновик в rich text со встроенными стилями, чтобы вставить его прямо в редактор официального аккаунта WeChat (微信公众号) без потери форматирования.
Это десктопное приложение или то, что я использую в браузере?Это веб-приложение на React, TypeScript и Vite, полностью работающее на клиенте (редактирование, предпросмотр и хранение происходят в вашем браузере).
Как начать писать?Пишите Markdown в панели редактора и смотрите живой рендер в синхронизированной панели предпросмотра, затем кнопкой копирования одним кликом получите блок rich text, готовый для WeChat, который можно вставить прямо в редактор официального аккаунта.
Нужен ли бэкенд или какие-то API-ключи для использования?Бэкенд или API-ключи не нужны — он полностью клиентский, и даже чтение/запись zip для бэкапов реализованы без сторонних библиотек, с помощью нативного CompressionStream браузера.
Почему система тем выдаёт только инлайновые стили вместо CSS-классов?Потому что редактор официального аккаунта WeChat вырезает атрибуты class и теги style при вставке, оставляя только инлайновые стили, поэтому система тем Mars Editor спроектирована выдавать исключительно строки инлайновых стилей, чтобы предпросмотр гарантированно совпадал с тем, что переживёт вставку.
Нужно ли сначала загружать изображения на хостинг картинок?Нет — изображения встраиваются как data URI, и тесты показывают, что они остаются неизменными после вставки в бэкенд-редактор WeChat, так что писать и копировать можно без отдельного хостинга картинок.
Какие форматы экспорта поддерживаются?Можно экспортировать текущий черновик как обычный .md, все черновики как .zip-бэкап (черновики плюс исходные изображения и manifest.json) или отрендеренный пост как одну длинную .png-картинку шириной 750px.
Как редактор работает с темами и плотностью макета?В комплекте несколько встроенных светлых/тёмных «бумажных» тем с переключением между ними, плюс три пресета плотности отступов (compact/standard/loose), где «standard» соответствует исходному дизайну каждой темы.
Size
0.1 MB
Stars
194
Updated
CommitSep 10
Age
1mo
Commits · 90 Days