别再用公众号编辑器了：57次更新，我做出了排版效率翻倍的‘外挂’
我做了一个微信公众号排版工具，今天想聊聊这 57 次提交背后的故事——不是讲技术多牛，而是讲一个独立开发者在「能跑」和「敢用」之间反复横跳的真实心路。
如果你也受够了排版浪费时间、复制粘贴丢样式，文末有这个工具的体验地址（免费）。
一、为什么做这个工具
写公众号的人都知道痛点：
- 想专注写作，结果一半时间花在调字号、调边距上
- 看到喜欢的文章样式，只能靠截图估颜色、估间距
- 复制到公众号编辑器，背景色没了、引号变方块、加粗丢失
- 多个账号多套样式，没有统一复用
- HTML样式一键重排版
我决定自己写一个：所见即所得，一键复制到公众号不丢样式。
现在这个工具已经帮我节省了 10+ 篇文章、累计 5+ 小时的排版时间。如果你也在写公众号，应该能用得上（体验方式见文末）。
二、从 0 到「能跑」
最初版本很朴素：左边 Markdown 编辑器，右边预览，5 套主题，复制到剪贴板。第一次提交 70dbf2b，功能齐全、能跑起来。
但「能跑」离「敢用」差了十万八千里。
三、那些让我崩溃的"小问题"
1. 字体引号的诅咒
复制到公众号，加粗的**之间出现了<span style='font-family:"">这种垃圾属性。
我以为是 markdown-it 的问题，改了三版解析器；后来发现是字体族font-family里的引号被公众号编辑器识别为属性分隔符。
修复：去掉引号，加转义，重构 buildInlineHtml 流程。
相关 commit：a09a7e8、71dcfc3、a965062
2. 背景色复制过去就消失
设置了好看的背景色，复制到公众号变成白底。
排查发现：公众号编辑器会丢弃外层 div 的 background-color，必须用 section 标签 + 强制十六进制（不能写变量）。
修复：外层用<section>包裹，颜色全部展开为#xxxxxx。
相关 commit：3199323、d8bd279、1641f96
3. 加粗与中文相邻时解析失效
**加粗**内容这种中文紧贴的情况，markdown-it 解析失败，加粗丢失。
加了正则兜底 + 单测回归，再没复发。
相关 commit：422fe18
4. 一键复制按钮"点不动"
线上用户反馈按钮无反应。本地一切正常。
最后发现是 Clipboard API 的 MIME 兼容性问题，公众号环境只支持text/html一种。
相关 commit：3aa7345、915a243、5a5c8b0
每一个 bug 都是用户骂出来的。如果你试用时遇到问题，直接留言，我改。
四、第一次大重构：从单文件到模块化
功能稳定后，App.tsx 已经膨胀到 1500+ 行，主题配置全部堆在themes.ts一个文件里（1026 行）。
我意识到：个人项目最怕的不是写不出来，是改不动。
于是做了三次大手术：
- 拆分组件：App.tsx → EditorPanel / PreviewPanel / ThemePanel / FormsPanel / CardsPanel / ModulePanel + 6 个 hooks
- CSS 模块化：950 行的 styles.css → 8 个职责分明的子文件
- 主题系统重构：从硬编码 →
mergeVars配置驱动，新增主题只需 5 行
结果：新增一套主题从 200 行代码降到 5 行。
相关 commit：afeb213、58f5270、93755c3、abd2336
五、40+ 套主题，6 大风格
按"简约 / 活泼 / 专业 / 文艺 / 科技 / 节日"分类，精选了 40+ 套主题，涵盖：
- 默认公众号风格、极简白
- 商务蓝、暖色编辑
- 樱花、春日、清明等节日主题
- 深度阅读、技术风格
每套主题不只是改颜色，还包含：标题样式、加粗颜色、引用样式、代码块、列表、分割线。
最让我得意的是"现代商务蓝"——给标题加蓝色圆角背景，加粗文字用强调色，被好几个做付费内容的朋友直接拿去用。
如果你有想要的主题样式，留言告诉我，我加到下一版里。
六、那些"看似很小"的修复
Ctrl/Cmd+B复制到公众号，Ctrl/Cmd+S导出草稿- Toast 居中、自动消失
- 段后距实时调节
- 主题支持分类筛选
- 草稿自动保存到本地
- 模块库支持拖拽排序、标签筛选、导入冲突策略
每一个都对应一个真实的写作场景。做工具最怕"我觉得用户不需要"，但其实用户每天都在骂。
七、为什么值得花这么多时间
我自己的公众号用这个工具写了 10+ 篇文章，每篇节省 30 分钟排版时间。
更重要的：我再也不会因为排版难看而犹豫要不要发。
这就够了。
八、技术栈（给想抄作业的同学）
- React 18 + TypeScript + Vite：开发体验拉满
- markdown-it：Markdown 解析
- CSS 变量 + 内联样式双轨：预览用 var() 保持可调，复制展开为具体值
- 配置驱动主题系统：mergeVars 组合，零硬编码
- 本地存储 + 剪贴板 API：无后端，纯前端
代码 4500 行，57 次 commit，从 5 月 7 日到 6 月 2 日。
九、这个工具适合谁
如果你符合以下任意一条，这个工具值得一试：
✅写公众号但不想被排版绑架的人
打开就能用，不需要注册，数据全部存在本地浏览器里，关闭页面也不会丢。
✅从网页或 Word 复制内容过来格式全乱的人
内置「一键重新排版」功能——把乱糟糟的 HTML 粘贴进去，自动清理成一键可用的 Markdown + 样式。
✅想要统一多账号排版风格的人
40+ 套主题，覆盖简约、活泼、专业、文艺、科技、节日 6 大风格，选定后一键套用，永久复用。
✅想要偶尔加点视觉模块（封面卡、提示卡、步骤卡）的人
模块库支持保存、标签分类、拖拽排序，下次直接复用，不用每次重新调。
✅完全免费，没有任何套路
不需要关注公众号，不需要转发，不需要付费——就是我自己写的工具，顺便分享出来。
十、关于开发过程中的工具
开发这个排版工具的过程中，我用 MonkeyCode 这个 AI 编程平台辅助代码生成和调试——确实帮我省了不少写重复代码的时间。
他们最近在办一个「AI 编程马拉松」活动，完成任务可以免费领取积分，想体验 AI 编程平台的同学可以去看看：
👉 通过我的邀请链接参加（不多说，活动页面比我讲得清楚。）
十一、如何获取这个工具？
第一步：关注公众号「米可乐的AI副业实录」
为什么关注？
- 我会持续更新这个工具（新主题、新功能）
- 公众号里会分享更多 AI 编程做工具的真实记录
- 偶尔发点排版技巧、公众号运营干货
- 如何你还有写标题的困扰，我还有一个爆款标题的系统工具
第二步：后台私信「排版工具」
我会自动回复体验网站地址 + 使用说明。
完全免费，不需要转发，不需要集赞。
因为这个工具是我真实在用的，我也知道写公众号的人最缺的是时间，不是钱。
如果你也在为了排版困扰，欢迎试用（地址通过私信获取），有任何问题留言告诉我。
#公众号工具 #独立开发 #技术复盘 #React