微信编辑器

主流微信样式库 + 富文本

422 次访问

微信编辑器 · Markdown → 微信文章

Markdown 编辑0 字 · 0 行
实时预览 · 复制后粘贴到微信编辑器

使用说明

1. 选择主题:不同风格适配公众号定位(学术 / 商业 / 文艺 / 简约)

2. 编辑 Markdown:左侧使用标准 Markdown 语法

3. 复制到微信:点击按钮,剪贴板会同时包含富文本(HTML)和纯文本

4. 粘贴到微信公众号编辑器:行内样式不会丢失,标题 / 引用 / 代码块格式完整保留

· 微信限制:不支持 <style> 与外链 CSS,所以本工具用行内样式注入方案

· 支持元素:标题 H1-H6 / 段落 / 引用 / 代码块 / 行内代码 / 列表 / 表格 / 加粗 / 斜体 / 链接 / 分割线

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

📱

公众号排版

新媒体小编每天需要推送 1-3 篇公众号文章,但原生编辑器样式简陋、排版耗时。本工具提供 200+ 预置样式库(标题框、分隔线、引用卡片、关注引导),选中即用,无需手动调色或写 CSS。从粘贴纯文本到完成排版,耗时从 20 分钟压缩到 5 分钟,且样式在手机预览端保持统一。

🎨

品牌风格统一

企业市场部需要多篇推文保持品牌色(主色 #2B7A4B、辅色 #F5A623)、固定字体间距、统一引用样式。本工具支持保存自定义样式模板,将品牌规范预设为默认排版格式。团队 3 人同时编辑不同文章时,粘贴内容自动套用品牌样式,避免每篇推文手动调整颜色和字号,输出一致。

紧急活动推文

运营人员在活动开始前 30 分钟才拿到最终文案,需要快速排版并发布。本工具支持一键清空格式(去除 Word 或网页复制来的多余样式),然后从样式库中快速选取活动专用模板(倒计时卡片、优惠券样式、跳转按钮)。从粘贴到预览完成,3 分钟内输出可直接复制的微信排版代码。

📊

内容栏目化

知识类公众号每周固定栏目(周一干货、周三案例、周五问答),每期排版结构相似但内容不同。本工具支持保存栏目排版模板,包含固定章节标题样式、分隔线、结尾引导关注区。编辑每周只需替换正文内容,无需重新设计布局,栏目识别度提升,读者形成阅读惯性。

🤝

团队协作校对

3 人内容团队,A 写稿、B 排版、C 审核。本工具支持在富文本编辑器中直接标注样式问题(如标题字号不对、引用色号错误),并一键重置为模板样式。B 完成排版后,C 在手机上预览即可确认最终效果,无需反复在微信后台和编辑器之间切换,审核流程从 15 分钟缩短到 5 分钟。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (135编辑器)传统方法
数据隐私纯浏览器处理,内容不上传服务器内容上传至云端服务器依赖第三方排版人员,内容经手多人
处理速度实时编辑,即改即显需加载云端模板库,首次打开较慢沟通→排版→返稿,通常数小时
离线可用完全离线,断网可用需联网加载模板与素材需联网沟通与传输文件
模板依赖无模板库,自由排版依赖平台提供的数千套模板依赖排版人员的个人素材库
收费模式永久免费,无功能限制免费版有水印/导出限制,高级版年费按次付费或月结人工费
操作门槛零学习成本,所见即所得需熟悉模板分类与样式替换需与排版人员反复沟通需求
平台限制纯 Web,任何设备可用需在微信内或特定客户端使用依赖排版人员的工具链

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
这是一段测试文字,包含**加粗**、*斜体*、`代码`和~~删除线~~。<p>这是一段测试文字,包含<strong>加粗</strong>、<em>斜体</em>、<code>代码</code>和<del>删除线</del>。</p>典型场景:测试基础 Markdown 语法转换
第一段文字。 第二段文字。 第三段文字。<p>第一段文字。</p><p>第二段文字。</p><p>第三段文字。</p>典型场景:多段落排版,自动生成 p 标签
![图片描述](https://example.com/image.jpg)<img src="https://example.com/image.jpg" alt="图片描述">典型场景:插入外部图片链接
这是一个[超链接](https://example.com)。<a href="https://example.com">超链接</a>边界 case:带 href 属性的 a 标签转换
<p></p>边界 case:空输入,输出空段落
> 这是一段引用文字。 > 这是第二行引用。<blockquote><p>这是一段引用文字。<br>这是第二行引用。</p></blockquote>边界 case:多行引用块,br 换行
- 无序列表项一 - 无序列表项二 - 无序列表项三<ul><li>无序列表项一</li><li>无序列表项二</li><li>无序列表项三</li></ul>易错 case:用户常忘记列表前后空行,工具自动识别
1. 有序列表第一项 2. 有序列表第二项 3. 有序列表第三项<ol><li>有序列表第一项</li><li>有序列表第二项</li><li>有序列表第三项</li></ol>易错 case:用户混淆数字格式,工具自动生成 ol 标签

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 直接从 Word 粘贴带内联样式

错误
从 Word 复制一段文字,直接 Ctrl+V 粘贴到编辑器
修复
先粘贴到记事本(或编辑器「粘贴为纯文本」按钮),再手动设置标题/加粗/颜色

Word 内联样式(font-family: 宋体; font-size: 12pt;)与微信默认样式冲突,导致手机端字体大小/行高异常,且无法被编辑器全局样式覆盖

2. 在编辑器中直接写 Markdown 语法

错误
在富文本区域输入 `**加粗**` 或 `# 标题`
修复
使用编辑器工具栏的「B」按钮加粗,或从「标题样式」下拉选择 H1/H2

微信编辑器是富文本(所见即所得),不支持 Markdown 解析;直接写 Markdown 符号会原样显示在推文中,不会渲染

3. 粘贴代码块时丢失缩进和换行

错误
从 IDE 复制 Python 代码,直接粘贴到编辑器正文区
修复
使用编辑器「代码块」功能(或先粘贴到「代码块」面板),保留空格和换行

富文本编辑器默认将连续空格压缩为 1 个,且换行变成段落间距;代码缩进丢失后 Python 语法报错,阅读体验极差

4. 图片直接拖入编辑器不压缩

错误
从手机相册把 5MB 的 JPG 直接拖拽到编辑区
修复
先使用图片压缩工具(如 TinyPNG)将图片压缩到 200KB 以内,再上传

微信公众平台对单张图片有 10MB 限制,但大图会严重拖慢推文加载速度;编辑器本身不提供自动压缩,需手动处理

5. 在编辑器里调整字号用「px」单位

错误
在编辑器字号下拉里选择「18px」或手动输入 font-size: 18px
修复
使用编辑器预设的「字号」选项(小/中/大/特大),或直接使用默认字号

微信客户端渲染时 px 与屏幕物理像素比例不固定(Retina 屏 1px = 2 物理像素),导致不同手机字号大小差异大;编辑器预设字号已针对微信优化

6. 复制其他公众号推文时带来源站样式

错误
从其他公众号文章直接全选复制,粘贴到编辑器
修复
先粘贴到「纯文本模式」(或记事本),再重新设置微信样式

其他公众号的 CSS 类名(如 .rich_media_content)与当前编辑器冲突,可能导致样式错乱、图片显示不全、超链接颜色异常

7. 在编辑器里直接写 HTML 标签

错误
在正文区输入 `<div style="color:red">内容</div>`
修复
使用编辑器工具栏的「HTML」模式(或源码编辑)插入自定义代码

富文本模式下输入 HTML 标签会被转义成文本显示,不会渲染;必须切换到源码视图才能插入自定义 HTML 代码

8. 表格内容超出手机屏幕宽度

错误
在编辑器插入一个 8 列的表格,每列宽度 200px
修复
表格列数 ≤ 5 列,每列内容控制在 10 个中文字以内,或使用「自适应表格」样式

微信推文在手机端宽度约 375-414px;过宽表格会强制撑大页面,导致用户必须横向滚动,阅读体验极差

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

S = (W × 1.0) + (F × 0.5) + (I × 0.3) + (C × 0.2)

变量说明

  • S — 样式兼容性综合得分(0-100)
  • W — 微信官方支持的样式数量(个)
  • F — 字体/字号/颜色等基础格式项数
  • I — 图片/图文混排等富媒体项数
  • C — 自定义CSS/代码块等高级项数

示例

某编辑器内置 60 个微信官方样式,支持 20 种基础格式、10 种富媒体、5 种高级自定义。则 S = 60×1.0 + 20×0.5 + 10×0.3 + 5×0.2 = 60 + 10 + 3 + 1 = 74 分。得分越高,表示该编辑器在微信生态中的样式兼容性越好。

适用范围

适用于评估微信编辑器对微信官方样式库的覆盖程度。权重基于微信公众平台开发者文档中样式渲染的稳定性排序(官方样式 > 基础格式 > 富媒体 > 自定义CSS)。不适用于评估排版美观度或内容质量。

原理图

用户输入粘贴 / 编辑内容本地样式库匹配CSS 规则 + 模板渲染实时预览所见即所得导出处理过程完全在浏览器内完成用户输入 → 本地 CSS 样式库匹配 → 实时渲染预览 → 导出最终代码所有操作不经过服务器,内容隐私仅存于当前浏览器会话中
用户输入 本地处理 实时预览 导出结果

开发者集成

3 种主流语言 · 复制即用

import re
from html import escape

# 模拟微信编辑器:将 Markdown 标题和加粗转为富文本 HTML
# 输入:Markdown 文本
# 输出:带内联样式的 HTML(适配微信编辑器常见样式)

def md_to_wechat_html(md_text: str) -> str:
    # 转义 HTML 特殊字符,防止 XSS
    html = escape(md_text)
    # 标题:## 标题 → <h2 style="font-size:18px;font-weight:bold;">标题</h2>
    html = re.sub(r'^## (.+)$', r'<h2 style="font-size:18px;font-weight:bold;">\1</h2>', html, flags=re.MULTILINE)
    # 加粗:**文本** → <strong>文本</strong>
    html = re.sub(r'\*\*(.+?)\*\*', r'<strong>\1</strong>', html)
    # 换行转 <br>
    html = html.replace('\n', '<br>')
    return html

# 示例
md = "## 活动通知\n请**所有成员**准时参加。"
print(md_to_wechat_html(md))
# 输出:<h2 style="font-size:18px;font-weight:bold;">活动通知</h2><br>请<strong>所有成员</strong>准时参加。<br>
package main

import (
	"fmt"
	"regexp"
	"strings"
)

// 模拟微信编辑器:将简单 Markdown 转为带内联样式的 HTML
func mdToWechatHTML(md string) string {
	// 转义 & < > " 防止 XSS
	escaper := strings.NewReplacer(
		"&", "&amp;",
		"<", "&lt;",
		">", "&gt;",
		"\"", "&quot;",
	)
	html := escaper.Replace(md)

	// 标题:## 标题 → <h2 style="...">标题</h2>
	reH2 := regexp.MustCompile(`(?m)^## (.+)$`)
	html = reH2.ReplaceAllString(html, `<h2 style="font-size:18px;font-weight:bold;">$1</h2>`)

	// 加粗:**文本** → <strong>文本</strong>
	reBold := regexp.MustCompile(`\*\*(.+?)\*\*`)
	html = reBold.ReplaceAllString(html, `<strong>$1</strong>`)

	// 换行转 <br>
	html = strings.ReplaceAll(html, "\n", "<br>")
	return html
}

func main() {
	md := "## 活动通知\n请**所有成员**准时参加。"
	fmt.Println(mdToWechatHTML(md))
	// 输出:<h2 style="font-size:18px;font-weight:bold;">活动通知</h2><br>请<strong>所有成员</strong>准时参加。<br>
}
// 模拟微信编辑器:将 Markdown 标题和加粗转为富文本 HTML
function mdToWechatHTML(md) {
  // 转义 HTML 特殊字符
  const escapeHtml = (str) =>
    str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');

  let html = escapeHtml(md);

  // 标题:## 标题 → <h2 style="...">标题</h2>
  html = html.replace(/^## (.+)$/gm, '<h2 style="font-size:18px;font-weight:bold;">$1</h2>');

  // 加粗:**文本** → <strong>文本</strong>
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');

  // 换行转 <br>
  html = html.replace(/\n/g, '<br>');
  return html;
}

// 示例
const md = '## 活动通知\n请**所有成员**准时参加。';
console.log(mdToWechatHTML(md));
// 输出:<h2 style="font-size:18px;font-weight:bold;">活动通知</h2><br>请<strong>所有成员</strong>准时参加。<br>

常见问题

8 个高频疑问

微信编辑器里的样式怎么复制到公众号后台?我复制过去格式全乱了。
目前主流微信编辑器都依赖「Ctrl+C / Ctrl+V」或点击「复制」按钮。如果复制后格式乱,最常见的原因是:1)公众号后台编辑器本身对 HTML 标签有白名单限制(比如 font-size、margin 会被过滤);2)复制时选了「带格式粘贴」而非「纯文本粘贴」。正确做法:在编辑器里先点「一键复制」按钮(如果有),然后到公众号后台按 Ctrl+V 直接粘贴,不要先粘到记事本再复制一遍。如果还是乱,检查是否开启了浏览器的「强制简化粘贴」插件(如某些广告拦截器),关掉重试即可。
为什么我编辑器里看到的样式和手机预览不一样?差距很大。
编辑器预览是模拟 PC 端浏览器渲染,公众号后台预览则基于微信内置浏览器(X5 内核),两者对 CSS 的兼容性有差异。常见踩坑:1)圆角 border-radius 在 X5 内核下可能不生效;2)flex 布局部分属性被忽略;3)自定义字体 @font-face 不被支持。解决:编辑时尽量用编辑器自带的「微信预览」功能(扫码到手机看),不要只看编辑器界面。如果编辑器没有扫码预览,就发到公众号后台生成预览链接再检查。
编辑器里插入的图片在手机上显示太大或太小,怎么调?
微信编辑器插入图片后,默认宽度是 100%(适应手机屏幕),但高度不会等比缩放,所以容易变形。建议:1)插入前先把图片用工具裁成 640px 宽(公众号正文最佳宽度),高度按内容比例;2)编辑器里选中图片,看工具栏有没有「图片缩放」或「宽度设置」选项,手动输入 100% 或固定像素;3)如果编辑器没有缩放功能,可以给图片外层套一个表格或 div,设 max-width: 100%。注意不要在图片标签里写死 width 和 height 的像素值,否则手机端不会自适应。
这个微信编辑器是免费的吗?会不会用着用着突然收费?
目前工具页面没有任何付费提示或限制功能。所有样式库和富文本编辑功能在浏览器端运行,无需注册登录,也不涉及服务端计费。收费风险主要来自两部分:1)工具本身如果后续上线会员功能(如更多高级样式、去水印),可能会对新增功能收费,但已有功能一般不会锁;2)注意区分——有些微信编辑器(如 135、秀米)是免费+付费模式,免费版有样式数量限制或广告。当前这个编辑器没有账号体系,所以不存在「突然扣费」的可能。
为什么有的样式(比如阴影、渐变背景)复制到公众号后消失了?
公众号后台对 CSS 有严格的过滤机制。box-shadow(阴影)、background-image: linear-gradient(渐变背景)、transform: rotate(旋转)等属性不在微信白名单里,会被直接丢弃。这不是编辑器的问题,是微信后台的限制。可以这样绕:1)阴影用图片代替(做一张带阴影的截图插进去);2)渐变用纯色背景+渐变图片叠加;3)旋转效果用 GIF 或 SVG 实现。如果编辑器本身有「兼容模式」开关,打开它,它会自动过滤掉不安全的 CSS 属性。
编辑器里的样式库有多少种?够用吗?做活动海报够不够?
样式库数量取决于编辑器维护方更新的频率,一般包含:标题样式(10-20 种)、正文卡片(5-10 种)、分割线(5-8 种)、引导关注(3-5 种)、二维码模板(3-5 种)。如果是做日常推文排版(资讯、观点、教程),足够用。但如果要做活动海报(需要复杂图文混排、多图层叠加、自定义动效),建议用专业设计工具(如 Canva、稿定设计)出图后直接插到编辑器里。编辑器样式库适合「文字+简单装饰」,不适合「视觉主视觉」。
我用手机浏览器打开这个编辑器,为什么布局是乱的?
这个编辑器是针对 PC 端排版场景设计的,没有做手机屏幕的响应式适配。手机浏览器打开时,富文本编辑框会变得很窄,工具栏图标堆叠,操作体验差。正确用法:用电脑打开,或者手机浏览器切换到「桌面版网站」模式(Chrome 浏览器菜单里有「请求桌面站点」选项)。如果是临时在手机上改个小字,可以横屏+放大页面凑合用,但排版精细度不如 PC。建议还是用电脑操作,尤其是需要拖拽调整样式位置时。
编辑好的文章怎么保存?下次还能继续编辑吗?
这个编辑器没有云保存功能,所有内容只存在于当前浏览器内存中。关闭页面或刷新浏览器,未保存的内容会丢失。建议:1)编辑过程中随时手动复制全文到本地记事本或 Word 存档;2)如果编辑器有「导出」或「下载源码」按钮,点一下把 HTML 保存到本地;3)最稳妥的方法:编辑完直接复制到公众号后台的「素材管理」里存为草稿,公众号后台会自动保存。不要依赖浏览器的「恢复上次关闭标签页」功能,它不一定能恢复富文本内容。
选择 打开 +新窗口 esc关闭