又折腾了个MD排版编辑器,这次主打「打开就能用」

写公众号也有阵子了，成绩没攒下多少，吐槽倒是攒了一堆——最大那条始终没变：微信自带的编辑器，是真的不顺手。

排版全靠手动调，换个样式点半天，图片、代码、公式这些稍微讲究点的内容，基本是「能塞进去就谢天谢地」。为了写得舒坦，我前后试过 VS Code 配插件、Obsidian 套模板、各种在线编辑器……各有各的好，也各有各的「差点意思」：模板样式是死的，想花哨点难；功能一多就眼花；有的还得登录、联网，内容存在别人服务器上，看着就不踏实。

说到底就一句：闲不住，想自己整一个合手的。

于是有了这个东西——专给公众号写文用的 Markdown 排版编辑器。核心想法特别朴素：纯前端、打开即用、所见即所得、一键复制到后台不走样。

顺一句：这篇文章本身，就是用它排版、复制、粘贴发出来的。

它到底能干嘛

编辑器：写得顺，是第一位的

左边敲 Markdown，右边实时渲染（基于 markdown-it 14），所见即所得。语法管够：标题、列表、引用、表格、代码块全套，外加任务清单 - [x] 和 GitHub Alerts（NOTE／TIP／WARNING 那几种带颜色的提示块）。

上手不靠记语法——工具栏把 H1~H3、加粗、斜体、下划线、行内代码、链接、有序无序列表、引用、代码块、图片、表格全做成了图标，点一下就插入；常用操作也配了快捷键，Ctrl/Cmd+S 保存、B 加粗、I 斜体、K 链接、Tab 缩进，写起来基本不用离开键盘。

辅助功能也齐：自动生成内容目录（TOC）、左右同步滚动、手机／平板／桌面三种设备预览随时切换；编辑区、预览区、右侧面板三栏的宽度都能拖，比例随手调到自己舒服的状态。

主题：近 30 套，一键换装

这是我最上心的地方。内置 26+ 套精调过的主题，按四大类组织，想要什么调性都能找到：

• 简约主义——干净克制、留白舒服，适合日常推文；
• 技术阅读——仿掘金／GitHub／Apple／Anthropic 文档风，写技术内容很对味；
• 传统质感——纸媒、古籍、衬线排版，有「读物」的味道；
• 设计灵感——卫报、日经、勒蒙德等编辑设计风，个性更强。

每套主题对标题、正文、列表、引用、代码、表格、图片都做了完整样式，切换就是一键的事。字号还能整体微调，代码块也有独立配色主题，甚至可以「跟随当前主题」自动搭配。

图片：这块是真下了功夫 ⭐

公众号写文最烦的就是图——很多编辑器只能贴链接，没图床寸步难行。这里我重点啃了一下：

截图直接 Ctrl+V，本地拖拽、上传都行；插入后自动压缩（Canvas 处理，最大 1920px、质量 85%，GIF／SVG 则保持原格式不动）。图片会存进浏览器本地的 IndexedDB，正文里只留一个极短的 img:// 短链接，刷新页面也不丢，全程不需要图床。

最关键的是复制环节：点复制时图片自动转成 Base64 内嵌，粘到公众号图就在那儿，不用再二次上传。连续多张图还能自动排成两列／三列／2×2 网格，有点朋友圈那意思；圆角、阴影、间距这些图片样式也都能自己调。

公式与代码：别人贴过去是乱码，这里不是

数学公式预览用 KaTeX 实时渲染，行内 $...$、块级 $$...$$ 都支持；复制到公众号时自动转成 MathJax SVG 矢量图，粘过去照样清清楚楚，不像很多工具一贴就是一坨乱码。

代码走的是自研内联着色：把高亮直接写成内联样式，专治公众号「样式一粘就掉」的老毛病。JS／TS／Python／Java／Go／Rust／SQL 等常见语言都支持，还能配上 macOS 风格的三色圆点、语言标签和复制按钮，细节也讲究。

灵魂功能：那颗「复制」按钮

整个工具的命根子，就是这一下「复制」。点下去，底层悄悄干了一长串脏活累活：

网格图转表格（公众号不认 CSS Grid）、图片转 Base64（超大的再二次压缩）、公式转 SVG、代码块内联高亮加重建结构、列表扁平化、有序列表转段落、引用和 Alerts 规范化……最后把 text/html 和 text/plain 一并写进剪贴板。

一句话：预览长啥样，粘到后台基本就是啥样，不用再手动补样式。

文档管理这块也没落下：侧边栏新建／复制／删除／搜索，每 5 秒防抖自动保存到本地，不怕丢；整个文档列表还能导出／导入成 JSON（导出时图片转 Base64 一起打包），换电脑、做备份、搬家都省心。

折腾完的一点感想

它是纯前端做的——Vue 3 用 CDN 引、原生 ES Modules，零构建步骤，随便丢个静态服务器就能跑。「打开就是源码、改完刷新就生效」那种轻快感，我很受用。中途也借 AI 把早期那坨单文件 app.js 重构成了分层模块，按解析、导出、界面、存储分了层，后面加主题、加公式、加组件顺手太多。

最大的体会还是老话一句：AI 能帮你写代码，但你得先知道自己想要啥。 需求讲清楚，它是好帮手；想不明白，就只是陪你一起烧 token。

偶尔也犯嘀咕：花这么多时间，真不如直接去适应微信编辑器？可转念一想——能按自己的审美把排版固定下来，以后每次写文都顺手，这事儿对我来说，值。

地址在这儿

• 在线使用：https://wxedit.xzqcloud.cn:16666/

纯前端、开箱即用、免注册免登录，内容全程留在你自己浏览器本地。

要是你也常被公众号编辑器折磨，欢迎来试试。有意见、建议、bug，直接发我～ 喜欢就点个赞、转给同样在折腾公众号的朋友吧 ♥️