W-Blog编辑器详细教程（可直接抄模板）
这篇教程给新手写，按“能直接上手”来整理。你可以先看前半部分功能说明，再直接复制后半部分模板使用。
一、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）。这种情况下可先用基础引用写法，或联系管理员调整规则。
四、隐藏内容（评论可见）正确用法
- 点击工具栏 隐藏内容。
- 在高亮块内部输入要隐藏的内容。
- 不要删除整块容器，只改里面文字即可。
手动标记写法：
<!--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>