排版被要求返工
运营小王花3小时排好的推送，领导一句「标题间距再大点、重点句换个色」就得全盘重来。用本工具的样式库，点选预设的标题卡、分割线、色块，替换文字即可，无需手动调CSS。从收到修改意见到生成新预览，只需15分钟，且样式统一不出错。
Markdown 编辑 editor0 字 · 0 行
微信预览 preview—
预览区 · 直接复制粘贴到微信公众号编辑器
就绪 · 纯本地渲染，文本不上传、不入 URL
第一节
关于本工具
About在公众号后台编排一篇图文，最磨人的不是找图，是把微信自带的编辑器里那些行距失控、段首缩进失效、字体大小不一的文字，一句句调成能看的排版。把文本粘贴进来，这个编辑器会解析微信富文本的残留样式，统一清掉多余格式，同时保留加粗、斜体、引用这类语义标记，再套用一套预设的排版规则——行距、缩进、段间距一次对齐。所有处理都在浏览器里完成，文本不会离开本地。
使用场景
多图混排对齐难
市场部小李要在一篇推文里放6张产品实拍图，每张尺寸不一，在编辑器里拖来拖去总对不齐。本工具提供图文组合样式，选「左图右文」或「三图并排」模板，图片自动裁剪至统一宽高比，文字自动环绕，无需手动量边距。
新编辑不会改代码
刚入职的编辑小张只会打字，遇到需要改行间距、加阴影、做渐变背景的排版需求就卡住。本工具内置200+现成样式，点击即可应用，所有样式均以富文本形式保留，复制到公众号后台不会丢格式，零代码基础也能做出专业级排版。
深夜急发公告
晚上10点公司突发产品召回公告，法务要求正文必须包含红色警告框、加粗条款和底部盖章区。运营在家只有手机，用本工具在移动端打开，从样式库中选中「红色警示框」和「条款列表」，粘贴文字后直接生成完整排版，5分钟发完。
多平台同步发布
一篇活动推文要同时发公众号、知乎专栏和今日头条。不同平台的编辑器对Markdown支持不一，复制过去经常丢格式。用本工具排好后，导出为纯HTML或Markdown格式，保留标题层级、列表缩进和链接，粘贴到各平台后台仅需微调间距，省去逐平台重新排版的时间。
对比矩阵
| 维度 | 本工具 | 竞品 A（135编辑器） | 传统方法（Word排版+截图） |
|---|---|---|---|
| 操作方式 | 在线富文本编辑，实时预览 | 在线富文本编辑，需手动同步样式 | Word排版后截图，需反复调整 |
| 样式库 | 内置主流微信样式库，一键插入 | 样式库更丰富，但部分需付费 | 无样式库，纯手工设计 |
| 排版效率 | 拖拽/点击即可完成整篇排版 | 需逐段选择样式，步骤较多 | 手动调整字体/间距/颜色，耗时较长 |
| 导出格式 | 直接复制到微信公众号后台 | 复制到公众号或下载HTML | 截图后上传，图片清晰度下降 |
| 收费模式 | 免费使用全部样式 | 基础免费，高级样式/模板需会员 | 仅需Word软件（可能需购买） |
| 学习成本 | 零门槛，打开即用 | 需熟悉样式分类和操作流程 | 需掌握Word排版技巧 |
第二节
使用指南
Getting Started使用步骤
- 1在富文本编辑区粘贴或输入原始内容，左侧样式库同步显示可用模板分类
- 2点击任一样式卡片（如标题、卡片、分割线），选中内容自动套用该样式并实时预览
- 3在编辑区直接修改文字、图片或颜色，右侧预览窗同步更新最终效果
- 4点击工具栏「复制全文」按钮，将带样式的完整内容存入剪贴板，可直接粘贴到微信编辑器
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 这是一段普通文字，用来测试基本样式。 | <p>这是一段普通文字，用来测试基本样式。</p> | 常规：最基础的纯文本输入，验证富文本编辑器对无格式内容的处理，确保输出为干净的段落标签。 |
| 标题一 标题二 标题三 | <p>标题一</p><p>标题二</p><p>标题三</p> | 常规：多行文本输入，验证换行符是否被正确转换为独立的段落，而非合并成一行。 |
| <p><br></p> | 边界：空输入的处理。部分编辑器会返回空字符串或报错，本工具返回一个带空行标签的段落，保持结构完整。 | |
| 带空格和制表符的文本 | <p> 带空格和制表符的文本 </p> | 边界：输入包含多余空白字符（空格、制表符）。验证工具是否保留原始空白，还是自动修剪。此处保留原样。 |
| <script>alert('xss')</script> | <p><script>alert('xss')</script></p> | 易错：HTML 标签注入。验证工具是否对危险标签进行转义（防止 XSS 攻击），而非直接渲染为可执行脚本。 |
| 这是一段包含中文、English、数字123和符号@#￥%的混合文本。 | <p>这是一段包含中文、English、数字123和符号@#￥%的混合文本。</p> | 易错：多语言及特殊符号混合输入。验证编辑器对 Unicode 字符集的兼容性，确保不出现乱码或丢失字符。 |
| a b c d e f g h i j k l m n o p q r s t u v w x y z | <p>a</p><p>b</p><p>c</p><p>d</p><p>e</p><p>f</p><p>g</p><p>h</p><p>i</p><p>j</p><p>k</p><p>l</p><p>m</p><p>n</p><p>o</p><p>p</p><p>q</p><p>r</p><p>s</p><p>t</p><p>u</p><p>v</p><p>w</p><p>x</p><p>y</p><p>z</p> | 边界：大量短行输入（26行）。验证工具对多段落内容的处理性能，以及是否会产生意外的合并或截断。 |
常见错误对照
1.直接粘贴 Word 内容，样式污染
✗ 错误
从 Word 复制一篇带表格、字体、行距的文档，直接 Ctrl+V 到编辑器✓ 修复
先粘贴到记事本或使用编辑器「清除格式」按钮，再重新排版Word 粘贴会携带大量内联样式（font-family、line-height、table 属性），与微信编辑器默认样式冲突，导致预览时布局错乱。
2.用空格代替缩进，段落首行不齐
✗ 错误
每段开头敲 4 个空格来模拟首行缩进✓ 修复
选中全文 → 点击工具栏「首行缩进」按钮（或设置段落缩进 2em）微信富文本渲染会压缩连续空格，空格缩进在手机端显示宽度不一致；CSS text-indent 才是标准实现。
3.图片未上传到微信素材库，直接引用外链
✗ 错误
在编辑器里插入 img 标签，src 写的是第三方图床的 URL✓ 修复
先将图片上传到微信公众平台素材库，复制素材库的永久链接插入微信文章只信任自家 CDN 域名（mmbiz.qpic.cn），外链图片在发布后会被屏蔽或加载失败。
4.使用编辑器不支持的字体名称
✗ 错误
在样式库中选择「微软雅黑」后，手动把 font-family 改成 '华文楷体'✓ 修复
只使用编辑器内置样式库中列出的字体（如默认、黑体、宋体、楷体等）微信客户端仅预装少数中文字体，非常用字体在用户手机上会回退为系统默认，导致排版失效。
5.嵌套多层样式组件，导致代码冗余
✗ 错误
先插入一个「标题框」组件，再在该组件内又插入一个「标题框」组件✓ 修复
使用单个组件完成一次排版，如需多级标题，分别用不同样式组件依次排列嵌套组件会生成多层 div 包裹，增加 HTML 体积，且微信编辑器渲染嵌套样式时可能出现 margin 重叠或边框错位。
6.修改样式后忘记点击「保存样式」
✗ 错误
在样式库中调整了颜色、大小，然后直接关闭编辑器✓ 修复
每次修改样式后，点击样式卡片右下角的「保存」按钮样式库是独立存储的，修改不会自动写入；不保存则下次打开仍为旧样式，需重新调整。
7.在代码模式下直接写 HTML 标签，未闭合
✗ 错误
切换到 HTML 源码模式，手动输入 <div class='box'> 但忘记写 </div>✓ 修复
始终使用可视化工具栏插入组件，或确保每个标签都有对应的闭合标签未闭合标签会导致后续所有内容被包裹在该 div 内，整个文章结构错乱，且微信审核可能报错。
8.复制其他公众号文章内容，未清理自定义样式
✗ 错误
直接复制一篇已发布公众号文章的全部内容粘贴到编辑器✓ 修复
先粘贴到纯文本编辑器，或使用编辑器「导入文章」功能自动过滤样式已发布文章包含大量微信特有的 data-* 属性和内联样式，直接粘贴会破坏编辑器样式库的 CSS 优先级。
第三节
工作原理
How It Works核心公式
渲染后文本 = 原始文本 + 样式标签 + 微信转义序列
变量说明
原始文本用户输入的纯文字内容样式标签HTML/CSS 样式，如 <span style=...>微信转义序列微信平台特殊转义符，如 & 等
示例
输入原始文本「你好」，添加红色字体样式标签 <span style="color:red">，经微信转义后输出：<span style="color:red">你好</span>（实际在微信中显示为红色文字）。
用户输入
本地处理
输出结果
第四节
开发者集成
For Developers4 种主流语言实现，复制即用：
import re
# 将微信富文本中的样式类名转为内联样式（简化版）
def wechat_style_to_inline(html: str) -> str:
# 模拟常见微信样式映射：class="rich_media_content" -> 字体、颜色
style_map = {
'rich_media_content': 'font-size: 17px; color: #333; line-height: 1.6;',
'rich_media_title': 'font-size: 22px; font-weight: bold; color: #000;',
}
def replace_class(match):
cls = match.group(1)
inline = style_map.get(cls, '')
return f' style="{inline}" ' if inline else match.group(0)
html = re.sub(r' class="([^"]+)"', replace_class, html)
return html
# 示例
sample = '<div class="rich_media_content"><h1 class="rich_media_title">标题</h1><p>正文</p></div>'
print(wechat_style_to_inline(sample))
# 输出: <div style="font-size: 17px; color: #333; line-height: 1.6;" ><h1 style="font-size: 22px; font-weight: bold; color: #000;" >标题</h1><p>正文</p></div>// 将富文本中的图片链接替换为微信支持的 data-src 格式（用于预览）
function convertImgToWechat(html) {
return html.replace(/<img[^>]+src="([^"]+)"[^>]*>/g, (match, src) => {
// 微信编辑器要求图片使用 data-src 而非 src（防止加载外部资源）
return match.replace(`src="${src}"`, `data-src="${src}"`);
});
}
const input = '<p><img src="https://example.com/pic.jpg" alt="图"/></p>';
console.log(convertImgToWechat(input));
// 输出: <p><img data-src="https://example.com/pic.jpg" alt="图"/></p>package main
import (
"fmt"
"regexp"
"strings"
)
// 移除微信富文本中所有 style 属性（用于清理用户粘贴内容）
func stripInlineStyles(html string) string {
re := regexp.MustCompile(` style="[^"]*"`)
return strings.TrimSpace(re.ReplaceAllString(html, ""))
}
func main() {
input := `<p style="color:red;font-size:20px">测试</p>`
fmt.Println(stripInlineStyles(input))
// 输出: <p>测试</p>
}# 使用 sed 将微信富文本中的 <section> 标签替换为 <div>（兼容微信编辑器格式）
echo '<section style="padding:10px;"><p>内容</p></section>' | \
sed 's/<section/<div/g; s/<\/section>/<\/div>/g'
# 输出: <div style="padding:10px;"><p>内容</p></div>第五节
常见问题
Q & A问我复制了公众号里的文章进来，为什么排版全乱了？＋
答
微信编辑器默认接收纯文本或通用 HTML，公众号文章自带复杂的内联样式和微信特殊标签，直接粘贴会丢失部分样式。建议先粘贴到「清空格式」按钮后的编辑区，再手动应用工具栏里的标题、段落、引用样式。如果文章来自第三方平台，最好先粘贴到记事本去除所有格式，再复制进来。
问编辑好的文章直接复制到公众号后台，图片会丢失吗？＋
答
本工具是纯前端富文本编辑器，图片以 base64 或网络链接形式嵌入。如果图片是本地上传，复制到公众号后台时 base64 数据可能因大小限制被截断。推荐先用工具里的「图片上传」功能（如果有）将图片转为外链，或复制后手动在公众号后台重新插入图片。网络图片链接不受影响。
问为什么我调好的字体大小和颜色，发到手机上就变了？＋
答
微信手机客户端对部分 CSS 属性有覆盖规则，比如正文默认字号 16px、行高 1.6，部分颜色值也可能被统一。本工具预览区模拟的是电脑端微信效果，与手机端不完全一致。建议在工具里尽量使用微信官方推荐的样式（如标题用 h1-h3，正文用 p，引用用 blockquote），避免自定义过细的 px 字号或特殊颜色。
问这个编辑器能直接导出成公众号文章吗？还是只能复制粘贴？＋
答
目前工具不提供一键导出到公众号后台的功能，编辑完成后需要全选复制（Ctrl+A → Ctrl+C）或使用工具栏的「复制全文」按钮，然后粘贴到公众号编辑器的正文区。所有样式（包括标题、引用、列表、分割线）会以 HTML 内联样式保留，粘贴后通常只需微调间距。不支持直接下载为 .html 或 .pdf 文件。
问我的文章里有很多代码块，这个编辑器支持高亮吗？＋
答
工具内置了代码块样式，支持常见语言的关键词高亮（如 JavaScript、Python、HTML、CSS）。在工具栏找到「代码块」按钮，粘贴代码后会自动识别语言并着色。如果高亮不准确，可以手动在代码块属性里选择语言。注意：部分高亮效果在微信手机端可能降级为纯色背景，建议关键代码用截图替代。
问编辑了一半不小心关了页面，内容还能找回来吗？＋
答
本工具是纯前端实现，所有内容仅保存在浏览器内存中，关闭页面或刷新会导致未保存的内容丢失。建议在编辑过程中定期点击工具栏的「保存到本地」或手动复制全部内容到记事本。部分浏览器（如 Chrome）在意外关闭后按 Ctrl+Shift+T 恢复标签页可能找回部分内容，但不保证完全恢复。
问这个编辑器和秀米、135编辑器比，哪个好用？＋
答
本工具主打轻量和快速上手，不强制注册登录，打开即用。相比秀米和135编辑器，它没有模板中心、排期、团队协作等功能，但胜在无广告干扰、加载速度快。如果你只需要给纯文字配标题、引用、分割线、列表等基础样式，这个工具足够；如果需要大量模板或复杂排版（如滑动、点击展开），建议用专业编辑器。
问我编辑的内容会被上传到你们服务器吗？隐私有保障吗？＋
答
所有编辑操作都在浏览器本地完成，文字和图片不会上传到任何服务器。工具是纯前端实现（FE），无后端接口，因此不存在数据泄露风险。即使刷新页面，内容也仅保存在当前浏览器内存中，关闭标签页后自动清除。如果需要长期保存，建议主动将内容另存到本地文件。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。