编辑器帮助文档

🚀点击我！体验在线编辑器

一、先快速认识这个编辑器

标准 Markdown 的通用写法可以参考：https://www.markdownguide.org/。

这个编辑器不是 “只能写纯 Markdown” 的简化版，而是一个 Markdown + 实时预览 + 自定义标签 + 公众号复制优化 的增强编辑器。

您可以把它理解成：

1. 左侧写 Markdown，右侧实时看效果。
2. 顶部工具栏负责帮您插入常用语法，不用死记硬背。
3. 除了标准 Markdown，还支持项目自定义语法和自定义标签。
4. 可以切到公众号预览模式，再一键复制排版后的内容。
5. 支持付费阅读、付费下载、付费视频、账号密钥、Power BI、微信验证码解锁等内容块。

如果您是第一次使用，建议这样上手：

1. 先用普通 Markdown 写正文。
2. 需要特殊效果时，再点工具栏按钮插入模板。
3. 涉及付费内容、Power BI、微信验证码时，优先使用工具栏或菜单生成标签骨架。
4. 切到“预览”或“微信公众号”检查最终效果。

二、这个编辑器和普通 Markdown 有什么不一样

2.1 普通回车通常也会保留换行

本编辑器开启了 Markdown 的换行增强模式。也就是说，在很多普通段落里：

第一行
第二行

预览时通常会直接换行，不一定非要在行尾补两个空格，当然使用 markdown lint 规范是非常棒的。

2.2 增强语法支持

• ==高亮==
• ^上标^
• ~下标~
• > [!NOTE] 提醒块
• :smile: Emoji 语法
• 行内公式 $...$、块级公式 $$...$$
• 脚注 [^1]
• 原生 HTML（例如 <details>）
• 项目自定义标签（例如 <pay-read>、<power-bi>、<wechat-captcha>）

2.3 图片支持直接粘贴或拖拽上传

把图片直接粘贴进编辑器，或把图片拖进编辑器，编辑器会自动上传，并插入类似下面的 Markdown：

![](图片地址)

2.4 实时预览

右侧预览会真实渲染：

• 标题目录
• 数学公式
• 代码高亮与复制按钮
• 付费内容卡片
• 账号密钥组件
• 会员购买组件
• 视频播放器
• Power BI
• 微信验证码解锁内容

三、常用 Markdown 速查表

下面这些写法最常用，建议先熟悉：

四、工具栏按钮完整映射

说明：不同设备、不同编辑场景（文章 / 评论）看到的按钮会略有差异。下面先讲每个按钮“做什么”，后面再讲不同场景的差别。

4.1 直接按钮：文本与结构

4.2 菜单按钮：标题

点击“标题”按钮后，可以继续选择标题级别：

额外说明：

• 当前更建议直接使用标题菜单，或使用 Ctrl+1 到 Ctrl+6。
• 编辑器会根据标题自动生成目录。

4.3 菜单按钮：Emoji

点击 Emoji 按钮会弹出表情面板，选中后会直接插入真实表情字符，例如：

😄

同时，编辑器也支持手写 Emoji 语法，例如：

:smile:

输入 :xxx 时，还会出现 Emoji 自动补全候选。

4.4 菜单按钮：表格

点击“表格”按钮后，可以输入行数和列数，编辑器会自动生成表格模板，例如 3 行 3 列：

|column1|column2|column3|
|:---:|:---:|:---:|
|content1|content2|content3|
|content1|content2|content3|
|content1|content2|content3|

4.5 菜单按钮：提醒块（Alert）

点击“提醒”按钮后，可以选择下面几种提醒样式：

示例：

> [!WARNING]
> 这一段内容非常重要，请认真阅读。

4.6 菜单按钮：付费内容

点击“付费内容”按钮后，可以快速插入以下模板：

4.7 菜单按钮：工具

点击“工具”按钮后，可以插入：

工具菜单右侧还有一个 齿轮按钮：

• PowerBI：可以预先保存 maskcolor 默认值。
• 微信验证码：可以预先保存 name（公众号名称）与 codeurl（二维码地址）默认值。

保存后，下次从工具菜单插入时会自动带出默认值。

4.8 视图与操作按钮

关于“编辑模式”和“预览”的一个关键点：

• 它们不是“只能二选一”的互斥模式。
• 两边都开着时，就是常见的 左写右看双栏模式。
• 只关掉其中一边时，就变成单栏模式。

五、不同场景下，哪些按钮会出现

5.1 文章编辑器

PC 端文章编辑器（功能最全）

包含：

• Vim
• 撤销 / 重做 / 清空
• 标题 / 粗体 / 斜体 / 引用 / 代码块 / 链接
• 有序列表 / 无序列表 / 任务列表 / mark / Emoji / 删除线
• 图片 / 表格 / 分割线
• 块级数学公式 / 脚注 / 上标 / 下标 / 详情 / 提醒
• 付费内容 / 工具
• 目录 / 编辑模式 / 预览 / 同步滚动条 / 微信公众号 / 复制 / 全屏 / 帮助

Pad 端文章编辑器

当前预设中，相比 PC 不显示：

• Vim
• 图片
• 表格
• 付费内容
• 工具
• 同步滚动条
• 微信公众号
• 复制

Phone 端文章编辑器

当前预设中，手机端保留的核心按钮主要是：

• 撤销 / 重做 / 清空
• 标题 / 粗体 / 有序列表 / 无序列表 / 任务列表 / mark / Emoji
• 编辑模式 / 预览 / 全屏 / 帮助

5.2 评论编辑器

评论编辑器整体更轻量：

• PC：清空、标题、粗体、斜体、引用、代码块、链接、列表、任务列表、mark、Emoji、编辑模式、预览、全屏、帮助
• Pad：清空、标题、粗体、列表、任务列表、mark、Emoji、编辑模式、预览、全屏、帮助
• Phone：清空、标题、粗体、列表、mark、Emoji、编辑模式、预览、全屏、帮助

如果您发现自己的工具栏没有某个按钮，先看是不是因为：

1. 当前是评论编辑器，不是文章编辑器；
2. 当前设备是手机 / 平板，按钮被精简了。

六、非标准 Markdown 语法说明

这一节讲的是：不是所有 Markdown 编辑器都有，但当前编辑器支持 的写法。

6.1 高亮文字

==重点内容==

重点内容

效果：把文字显示成 <mark> 高亮效果。

6.2 上标与下标

上标：

2^10^

2¹⁰

下标：

H~2~O

H₂O

6.3 提醒块

> [!TIP]
> 这里可以写提示说明。

支持 NOTE / TIP / IMPORTANT / WARNING / CAUTION 五种类型。

6.4 Emoji

您可以：

1. 直接点工具栏选 Emoji；
2. 或手写 :smile:、:rocket: 这样的写法。

6.5 脚注

这是正文[^1]
 
[^1]: 这里是脚注说明

6.6 公式

行内公式：

$E=mc^2$

$E=m{c}^2$

块级公式：

$$
\int_0^1 x^2 \, dx
$$

当前编辑器使用 KaTeX 渲染公式，并额外引入了化学公式扩展，所以类似下面的写法也可用：

$\ce{H2O}$

6.7 <details> 折叠块

<details><summary>点击展开</summary>
<p>
这里是折叠内容。
</p>
</details>

适合写：

• 补充说明
• 折叠答案
• 不希望默认展开的长段落

七、自定义标签完全说明（重点）

这一部分是本编辑器最有项目特色的能力。

7.1 <pay-read>：付费阅读内容

用途：把正文中的一部分设置成付费后才能阅读的内容。

写法：

<pay-read>
 
这里是付费后才能看到的正文内容。
 
</pay-read>

建议：

• 标签内部放真正需要隐藏的正文。
• 开始标签前、结束标签后都留空行。

7.2 <pay-download>：付费下载内容

用途：把下载说明、下载地址、附件介绍等内容包起来，作为付费下载区域。

写法：

<pay-download>
 
这里可以写下载说明、附件内容、资源介绍等。
 
</pay-download>

7.3 <pay-video>：付费视频内容

用途：付费视频文章使用。

写法：

<pay-video>
 
这里通常放视频之外的补充隐藏内容，例如资料包、补充说明、课件下载说明等。
 
</pay-video>

说明：

• 这个标签和普通付费正文不完全一样。
• 标签内部更适合写“视频之外的隐藏补充内容”。
• 如果您只想显示付费视频，不额外写补充内容，也可以写成单行空标签：

<pay-video></pay-video>

7.4 <pay-membership></pay-membership>：会员购买卡片

用途：插入“开通会员”的购买组件。

写法：

<pay-membership></pay-membership>

注意：

• 这是 单行空标签。
• 里面不要再写内容。

7.5 <pay-key>：账号密钥购买组件

用途：售卖账号、激活码、授权码、兑换码等。

推荐写法：

<pay-key id="产品ID" title="产品标题" description="补充说明"></pay-key>

字段说明：

• id：必填，对应要购买的产品 ID。
• title：可选，显示在组件上的标题。
• description：可选，显示在组件上的补充说明。

注意：

• 这是 单行空标签。
• 从编辑器校验规则来看，id 不能为空。

7.6 <video-player>：视频播放器

虽然当前默认工具栏没有单独的视频按钮，但项目已经支持手写这个标签。

HLS 视频写法

<video-player video-type="hls" id="视频ID" poster="封面地址"></video-player>

说明：

• video-type 必填。
• 当 video-type="hls" 时，必须提供 id。
• poster 可选，用来设置封面。

MP4 / WEBM 写法

<video-player video-type="mp4" src="https://example.com/demo.mp4" poster="https://example.com/poster.jpg"></video-player>

说明：

• 当 video-type 不是 hls 时，必须提供 src。
• 当前合法值：hls、mp4、webm。
• 这是 单行空标签。

7.7 <power-bi>：嵌入 Power BI 报表

写法：

<power-bi src="https://app.powerbi.com/reportEmbed?reportId=abc123" maskcolor="#ffffff"></power-bi>

字段说明：

• src：必填，必须是有效的 Power BI 地址。
• maskcolor：可选，遮罩颜色，必须是十六进制颜色值，例如 #fff、#ffffff、#ffffffff。

注意：

• 当前只接受 http / https 协议。
• 当前只接受 app.powerbi.cn 或 app.powerbi.com 域名。
• 这是 单行空标签。
• 预览区会显示全屏按钮。

7.8 <wechat-captcha>：微信公众号验证码解锁内容

用途：让读者先关注公众号、回复指定关键词拿到验证码，再解锁隐藏内容。

写法：

<wechat-captcha name="您的公众号名称" codeurl="您的二维码地址" key="验证码" reply="回复关键词">
 
这里是验证成功后才能看到的隐藏内容。
 
</wechat-captcha>

字段说明：

• name：公众号名称，必填。
• codeurl：公众号二维码地址，必填。
• key：真正的验证码，必填。
• reply：提示用户在公众号里回复什么关键词，必填。

说明：

• 读者先看到的是“关注公众号获取验证码”的卡片。
• 验证成功后才会显示内部隐藏内容。
• 同一篇文章验证成功后，前端会缓存验证状态，减少重复输入。

7.9 <login-view>：登录查看

用途：让读者登录、再解锁隐藏内容

写法：

<login-view>
 
您的隐藏内容
 
</login-view>

八、自定义标签书写规则（重点）

为了让预览、复制、渲染和内置校验都稳定工作，请遵守下面这些规则。

8.1 大多数自定义标签都要独占自己的行

不要这样写：

正文开始 <pay-read>隐藏内容</pay-read>

更推荐这样写：

正文开始
 
<pay-read>
 
隐藏内容
 
</pay-read>

8.2 标签前后必须留空行

对于 pay-*、power-bi、wechat-captcha、video-player 这类标签，最好都遵守：

• 开始标签前留一个空行；
• 结束标签后留一个空行。

8.3 单行空标签不要写内容

下面这些标签应写成单行空标签：

• <pay-membership></pay-membership>
• <pay-key ...></pay-key>
• <video-player ...></video-player>
• <power-bi ...></power-bi>

8.4 不要随意嵌套自定义标签

大多数自定义标签内部 不允许再嵌套其它项目自定义标签。

例如，不推荐这样写：

<pay-read>
 
<power-bi src="..."></power-bi>
 
</pay-read>

8.5 wechat-captcha 是少数例外，但也有限制

wechat-captcha 内部可以放：

• 普通 Markdown
• 普通 HTML
• video-player

但不能放：

• pay-read
• pay-download
• pay-video
• pay-membership
• pay-key
• power-bi
• 另一个 wechat-captcha

8.6 在代码块里演示标签是安全的

如果您只是想写教程、展示示例，请把自定义标签放进围栏代码块里。这样编辑器不会把它当成真实组件来校验或渲染。

<pay-read>
 
示例内容
 
</pay-read>

九、复制到微信公众号的推荐流程

如果您准备把内容粘贴到公众号编辑器，推荐这样做：

1. 正常写完 Markdown。
2. 点击工具栏里的 “微信公众号”。
3. 检查代码块、公式、标题、折叠块、图片排版是否符合预期。
4. 确认无误后，点击 “复制”。
5. 再粘贴到公众号编辑器中。

为什么要这样做？

• 公众号模式会尽量把预览处理成更适合公众号粘贴的 HTML。
• 代码块、公式、细节样式都会走一套额外优化逻辑。
• 直接复制公众号模式，通常比复制普通 Web 预览更稳定。

十、编辑器里的其它实用能力

10.1 底部状态栏

编辑器底部会显示：

• 当前字数
• 光标位置（第几行、第几列）

10.2 Ctrl+D 复制当前行

除了工具栏快捷键，编辑器还额外支持：

Ctrl+D

作用：复制当前行。

10.3 @ 提及补全

在支持提及数据的场景中，输入：

@

会出现提及补全列表。

10.4 内置 Markdown 检查

编辑器内置了 Markdown lint 检查，常见会提示这些问题：

• 行尾多余空格
• 行太长（某些场景会开启）
• 标题级别跳跃（某些场景会开启）
• 围栏代码块没有闭合
• 标题前后没有空行
• 自定义标签缺少必须属性
• 自定义标签没有闭合
• 不该单行的标签写错了结构

十一、写作建议

如果您想让内容更稳定、更好维护，建议遵循下面这套顺序：

1. 先写纯 Markdown 正文。
2. 再插入特殊块（提醒、公式、脚注、折叠块）。
3. 最后再加项目自定义标签（付费内容、视频、Power BI、公众号验证码等）。
4. 写完立刻看右侧预览。
5. 需要发公众号时，再切公众号模式检查并复制。

如果您拿不准某个自定义标签怎么写，最稳妥的方式就是：

• 先点工具栏按钮插入模板；
• 再只改里面的文字和属性值；
• 不要手动乱改标签结构。

最后祝您玩得愉快。