W-Blog编辑器详细教程（可直接抄模板）

这篇教程给新手写，按“能直接上手”来整理。你可以先看前半部分功能说明，再直接复制后半部分模板使用。

一、5 分钟快速上手

  1. 输入标题 → 选择分类 → （可选）填写摘要。
  2. 在正文输入内容，先写文字再上传图片/附件/视频。
  3. 上传完成后，确认内容已插入编辑区。
  4. 提交前点一次编辑器空白处，让内容同步到表单。
  5. 点击提交/保存。

二、工具栏功能对照

  • 段落：切换正文/标题样式。
  • B / I / U：加粗 / 斜体 / 下划线。
  • 列表：无序列表、有序列表。
  • 链接：插入超链接。
  • 表格：插入表格。
  • 图片：上传并插入图片。
  • 附件：上传并插入下载链接。
  • 视频：上传并插入视频播放器。
  • 隐藏内容：插入“评论可见”区域。
  • 代码：查看/编辑 HTML 源码。

三、颜色与引用（重点）

下面给两类示例：基础版（稳定） 和 彩色版（可视化更强）。

1）基础引用（稳定，推荐）

提示：这是普通引用块，适合写说明、提示、补充。

<blockquote>
  <p><strong>提示：</strong>这是普通引用块，适合写说明、提示、补充。</p>
</blockquote>

2）文字上色（可复制）

效果示例：这是普通文字，这是红色重点，这是蓝色说明，这是绿色结果。

<p>这是普通文字，
<span style="color:#e11d48;">这是红色重点</span>，
<span style="color:#2563eb;">这是蓝色说明</span>，
<span style="color:#16a34a;">这是绿色结果</span>。</p>

3）彩色引用框（可复制）

蓝色信息框：

信息：系统将在今晚 23:00 进行维护。

<blockquote style="border-left:4px solid #3b82f6;background:#eff6ff;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#1d4ed8;">信息：</strong>系统将在今晚 23:00 进行维护。</p>
</blockquote>

黄色警告框：

注意：请先备份再执行批量操作。

<blockquote style="border-left:4px solid #f59e0b;background:#fffbeb;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#b45309;">注意：</strong>请先备份再执行批量操作。</p>
</blockquote>

红色提醒框：

风险：删除操作不可逆，请确认后再继续。

<blockquote style="border-left:4px solid #ef4444;background:#fef2f2;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#b91c1c;">风险：</strong>删除操作不可逆，请确认后再继续。</p>
</blockquote>

说明：如果你前台投稿后发现颜色样式被自动清掉，通常是站点安全过滤在生效（会移除 style）。这种情况下可先用基础引用写法，或联系管理员调整规则。

四、隐藏内容（评论可见）正确用法

  1. 点击工具栏 隐藏内容。
  2. 在高亮块内部输入要隐藏的内容。
  3. 不要删除整块容器，只改里面文字即可。

手动标记写法：

<!--hidden:comment-only:start-->
这里写隐藏内容
<!--hidden:comment-only:end-->

五、上传规则

  • 图片：jpg / png / gif / webp，单个不超过 2MB。
  • 附件：pdf / doc / docx / xls / xlsx / ppt / pptx / txt / md / zip / rar / 7z，单个不超过 10MB。
  • 视频：mp4 / webm / ogg，单个不超过 50MB。

六、常见问题

  • 提示“正文内容不能为空”：正文只有空行或占位文字不算有效内容。
  • 上传成功但没显示：确认编辑区里确实出现了图片/链接/视频标签。
  • 隐藏内容不生效：检查是否写在隐藏块内，而不是写在块外。
  • 样式失效：可能被安全过滤移除，优先用基础写法。

七、复制模板区（直接拿去用）

模板 A：蓝色信息块

<blockquote style="border-left:4px solid #3b82f6;background:#eff6ff;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#1d4ed8;">信息：</strong>这里写提示内容。</p>
</blockquote>

模板 B：黄色注意块

<blockquote style="border-left:4px solid #f59e0b;background:#fffbeb;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#b45309;">注意：</strong>这里写注意事项。</p>
</blockquote>

模板 C：红色警告块

<blockquote style="border-left:4px solid #ef4444;background:#fef2f2;padding:10px 12px;border-radius:6px;">
  <p><strong style="color:#b91c1c;">警告：</strong>这里写风险提醒。</p>
</blockquote>

模板 D：行内彩色重点

<p>请重点关注：<span style="color:#e11d48;">截止时间</span>、
<span style="color:#2563eb;">报名方式</span>、
<span style="color:#16a34a;">结果通知</span>。</p>

模板 E：带下载按钮样式链接（简洁）

<p><a href="/uploads/attachments/your-file.zip" target="_blank" rel="nofollow noopener">点击下载附件</a></p>