论坛编辑器使用说明

长文精品区
1

在zlb潜水了一段时间，看到总规有两个帖子是介绍插件和一些新增编辑功能的，但比较基础的部分还没有说的
虽然感觉很多人都知道了，但也觉得还是有必要特地说明的…
目前计划是这样的：

  • 编辑器功能基本介绍（完成）
  • 一些特殊使用技巧（不定期更新，也欢迎回复分享）
  • 想到哪里写到哪里…

MD和BBCode本身的语法
Markdown
BBCode

14 个赞
2

这种帖子建议放网站反馈板块 :ys_013:

3

已修改分区并重新使用tag

4

引用整个帖子：
将主题帖用quote标签包裹，作为引用内容。
quote标签包含以下信息：

[quote="papple104, post:1, topic:15847, full:true"]
<主题帖内容>
[/quote]
效果

注：不在帖子内点击是没有效果的

一编：自己引用自己也有【首次引用】徽章，真神奇

5

基本格式（加粗、斜体、下划线）
编辑器默认的加粗和斜体是md语法，下划线是bbcode语法

**加粗** [b]加粗[/b]
*斜体* [i]斜体[/i]
***加粗的斜体*** [b][i]加粗的斜体[/i][/b]
[u]下划线[/u]
**[u]下划加粗（星号在外）[/u]**
[u]*下划斜体（星号在内）*[/u]
*[u]**下划加粗的斜体（星号分别在内外都有）**[/u]*
效果

加粗 加粗
斜体 斜体
加粗的斜体 加粗的斜体
md好像没有原生的下划线
下划加粗（星号在外）
下划斜体（星号在内）
下划加粗的斜体（星号分别在内外都有）

任意组合标签并不影响显示效果

1 个赞
6

超链接：
方括号写外显的标签文本，圆括号里是实际的跳转网址；
通过编辑器功能插入超链接时，可以只写网址，实际文本为标签与网址一致。

[https://zlb.ink/](https://zlb.ink/)
[壁吧专楼吧](https://zlb.ink/)
效果

https://zlb.ink/
壁吧专楼吧

注：即使是外链，直接点击目前也是在本窗口/标签页打开，并不会在新窗口/标签页打开网站

7

两种引用方式：块引用和预先格式化的文本
块引用使用后只要本行不为空行或纯空格行，换行后仍为引用内容；如需在引用中加入空行，可用html标签代替。
大部分语法仍然生效。

> 第一行
&nbsp;
第二行
<br>
第三行：

第四行
效果

第一行
 
第二行：上一行加了空格&nbsp;


第三行：<br>标签换行的间距好像更大？

第四行：没进引用

预先格式化的文本有两种情况：
作为标签使用单个反引号包裹，方便插入文本内；
作为代码段使用，这时大部分语法都不会生效，内容使用等宽字体，
方便介绍一些原理的东西（我写这个说明的时候就得经常使用）
这个就不看效果了，前面都有

1 个赞
8

编辑器里的两种图片上传：本地上传（第一个图片icon上传）、使用图床链接（第二个图片iconAdd an image）
通过本地上传的图片，完成加载是会经过一段时间的，中间会出现正在处理和正在上传的提示，此时发帖图片不会正常加载。
上传完成的图片格式如下：

![图片名称|初始分辨率](图片链接)

传一次图片可以复制了改了分辨率再放一张。
在大多数分区的帖子内，上传的图片会自动在右下角添加zlb水印。

一句“ ”牵出一帮“ ”

微信图片_20250214162307
微信图片_202502141623071920×1080 165 KB

微信图片_20250214162307
微信图片_202502141623071920×1080 165 KB

使用图床链接：在img标签内直接输入图片的地址，目前通过这种方式添加的图片没有水印。

[img]图片链接[/img]
壁吧专楼吧logo

480×120 53.9 KB

一编：可以用复制-粘贴的方式添加图片，通过这种方式添加图片也会在右下角添加zlb水印。

大家来找茬（雾）

上传图片
上传图片2400×1080 237 KB

复制粘贴图片
复制粘贴图片2400×1080 237 KB

2 个赞
10

各种对齐方式：
左中右比较直观，主要说一下两侧对齐Justify，在显示一长段文本时会尝试拉伸每行使其左右侧平整，而非在左/右对齐时，另一边有凹凸不平的情况（这在使用了不同语言的文字，或带有特殊格式的多行文本尤为明显）。
使用任意对齐标签都会新增额外的一行。

[left]左对齐[/left]
[right]右对齐[/right]
[center]居中[/center]
[justify]两侧对齐[/justify]
左右对齐和居中

森林书 第一章

残破的纸片

不畏风雨

两侧对齐的长文本

你要好好长大，不要输给风，不要输给雨，不要输给冬雪，不要输给炎夏。少年人，你在孩童时应当快乐，使你的心欢畅，行你所愿行的，见你所愿见的，然而也应当记住黑暗的时日。但愿新的梦想永远不被无留陀侵蚀，但愿旧的故事与无留陀一同被忘却，但愿绿色的原野，山丘永远不会变得枯黄，但愿溪水永远清澈，但愿鲜花永远盛开。挚友将再次同行于茂密的森林中，一切美好的事物终将归来，一切痛苦的记忆也会远去，就像溪水净化自己，枯树绽出新芽。最终，森林会记住一切。

左对齐的长文本（对比）

你要好好长大，不要输给风，不要输给雨，不要输给冬雪，不要输给炎夏。少年人，你在孩童时应当快乐，使你的心欢畅，行你所愿行的，见你所愿见的，然而也应当记住黑暗的时日。但愿新的梦想永远不被无留陀侵蚀，但愿旧的故事与无留陀一同被忘却，但愿绿色的原野，山丘永远不会变得枯黄，但愿溪水永远清澈，但愿鲜花永远盛开。挚友将再次同行于茂密的森林中，一切美好的事物终将归来，一切痛苦的记忆也会远去，就像溪水净化自己，枯树绽出新芽。最终，森林会记住一切。

11

无序列表项目符号列表和有序列表编号列表：
比起一行一段字更加地整洁，行间距也更大。

无序列表有以下前缀类型：星号* 、加号+ 、横杠- ，点击项目符号列表生成的无序列表为星号开头。
前缀每加2个空格，可使列表向下1个层级；同一层不能混用前缀，不同层混用前缀不影响但也不推荐。

* 无序列表（星号）
  * 无序列表（星号）
    * 无序列表（星号）
- 无序列表（横杠）
  - 无序列表（横杠）
    - 无序列表（横杠）
+ 无序列表（横杠）
  + 无序列表（横杠）
    + 无序列表（横杠）
* 无序列表（混合）
  + 无序列表（混合）
    - 无序列表（混合）
效果
  • 无序列表（星号）
    • 无序列表（星号）
      • 无序列表（星号）
  • 无序列表（横杠）
    • 无序列表（横杠）
      • 无序列表（横杠）
  • 无序列表（横杠）
    • 无序列表（横杠）
      • 无序列表（横杠）
  • 无序列表（混合）
    • 无序列表（混合）
      • 无序列表（混合）

有序列表都是以序号1. 开头的（注意空格）。
前缀每加3个空格，可使列表向下1个层级；
同级别的列表可以不按数字顺序，但每个列表或者子列表的第一项应从1开始，否则可能会影响列表排版。

1. 有序列表（1）
5. 有序列表（5）
7. 列表条目（7）
3. 列表条目（3）
   1. 有序列表（正常子项）
      2. 有序列表（到这里已经崩了）
         1. 有序列表
效果
  1. 有序列表（1）
  2. 有序列表（5）
  3. 列表条目（7）
  4. 列表条目（3）
    1. 有序列表（正常子项）
      2. 有序列表（到这里已经崩了）
      1. 有序列表
12

颜色、字体大小、表情符号

颜色：可用颜色的名称或Hex值
颜色名称可以参考这里（不确定全部可用）

[color=#66ccff]这是天依蓝[/color]
[color=red]这不是阿绫红[/color]
效果

这是天依蓝
这不是阿绫红

字体大小：bbcode的size标签只支持1~7，可以改用html标签突破这个限制。

[size=7]大字[/size]
<div style='font-size:72px'>更大的字</div>
不要随便调字体大小，避免影响观感

大字

更大的字

表情符号：被两个英文冒号包裹的表情名称，存在这个名字的表情的话，会显示表情。
表情符号在编辑器里和实际发帖时的大小不同。

:paimeng:
派蒙:paimeng:

:paimeng:
派蒙:paimeng:

1 个赞
13

插入日期/时间：
生成一个可点击查看的时间戳，分为date和date-range两种标签。记参数比较麻烦，建议通过编辑器功能生成。
点击将依次显示该时间戳对应的四个地区的当地时间：

  • 上海
  • 时间戳设定的时区（与前后相同时省略）
  • 巴黎
  • 洛杉矶

已知对于未来的日期时间，可以选择添加到日历，下载.ics文件或添加到Google日历（我没用过，不知道接下来怎么操作），下载的文件可用于新增名为【壁吧专楼吧事件】，时间为对应时间戳/期间的日程。

字段说明

date：日期（年-月-日）
time：时间（时:分:秒）[date限定]
timezone：时区（洲/地区）
format：格式标志（参考Moment.js的文档说明）
recurring：重复（数量.单位）[date限定]，设置重复将改为显示时间戳下次重复的时间

recurring可用的时间单位

重复
定义事件的重复频率。您还可以手动编辑表单生成的重复选项并使用以下键之一：years、quarters（注：recurring=1.quarters表示3个月重复一次）、months、weeks、days、hours、minutes、seconds、milliseconds

from/to：起始/结束时间（完整时间戳：年-月-日T时:分:秒）[date-range限定]

[date=2025-03-20 time=15:25:00 timezone="Asia/Shanghai"]
[date=2025-03-20 time=15:25:00 timezone="Asia/Seoul"]
[date=2025-03-20 time=15:25:00 format="LLLL" timezone="Asia/Shanghai" recurring="2.quarters"]
[date=2035-03-20 time=15:25:00 timezone="Asia/Shanghai"]
[date-range from=2035-03-20T15:25:00 to=2035-03-27T15:25:00 timezone="Asia/Shanghai"]
效果

2025-03-20T07:25:00Z
2025-03-20T06:25:00Z
Thursday, March 20, 2025 7:25 AM
2035-03-20T07:25:00Z
2035-03-20T07:25:00Z→2035-03-27T07:25:00Z

根据总规的插件功能介绍，插入日期可以配合日历插件使用，但是回复里是用不了的：

踩坑：尝试在后续回复使用日历

出错了：日历标签仅可用于话题的第一个帖子。

1 个赞
14

投票：
通过插入投票生成投票比较方便，生成格式如下：

[poll <投票设置>]
# 投票标题
* 投票选项1
* 投票选项2
...
[/poll]
投票设置的字段说明

name：生成的投票代码有时出现这个设置，与投票标题无关
type：投票类型，分别为regular(单选)、multiple(多选)、number(分数)、ranked_choice(排序选择)
results：显示结果处理，分别为always(始终可见)、on_vote(只在投票后)、on_close(在投票被关闭后)
public：为true时，显示参与投票的人
chartType：单选和多选的结果展示，分别为bar(条形图)、pie(饼图)
groups：限定可参与投票的群组，多个用英文逗号,连接，省略时所有人可参与投票
close：自动关闭投票的时间，为零时区的完整时间戳（国内时间减去8小时）：年-月-日T时:分:00.000Z
min/max：多选投票中，为勾选选项的最小/最大数量要求；
分数投票中，为打分的最低/最高分范围；
排序选择投票中，分别固定为1和2。
step：分数投票限定，打分的步骤长度
分数投票的所有选项都会满足最小值+N×步骤，N为小于20的自然数（打分选项不能超过20个）

单选投票 
[poll name=poll2 type=regular results=always public=true chartType=pie close=2035-03-19T16:00:00.000Z]
单选标签
  • 聊天室
  • 分享室
  • 吐槽
  • 感想
  • 氵氵氵
0 投票人
多选投票 
[poll name=poll3 type=multiple results=always min=2 max=4 public=true chartType=bar close=2035-03-19T16:00:00.000Z]
多选标签
  • 聊天室
  • 分享室
  • 吐槽
  • 感想
  • 氵氵氵
0 投票人
分数投票 
[poll name=poll4 type=number results=always min=0 max=100 step=10 public=false close=2035-03-19T16:00:00.000Z]
打分
  • 0
  • 10
  • 20
  • 30
  • 40
  • 50
  • 60
  • 70
  • 80
  • 90
  • 100
0 投票人
排序选择投票 
[poll name=poll5 type=ranked_choice results=on_vote public=false chartType=bar close=2035-03-19T16:00:00.000Z]
排序选择标签
  • 聊天室
  • 分享室
  • 吐槽
  • 感想
  • 氵氵氵
0 投票人
1 个赞
15

表格：不如在别的地方弄好表格截图贴上…
如果不这么做的话，在编辑器里就是通过md或者html的语法来画表格。

md表格的格式如下：

|第1列|第2列|第3列|第4列|      第1行表头
|-------|:---|:---:|---:|     第2行固定为分隔线
|长列宽|左对齐|居中|右对齐|     之后的每一行都是表格行
|无效|有效|有效|有效|          最后一行的下一行为空行，表格结束

这段文字不在表格内

前2行为必须，之后可根据需要添加行。
分隔线为任意数量的横杠---，在两侧加冒号可以控制对齐方式：左对齐:---、居中:---:、右对齐---:；增加横杠加长列宽在编辑器里无效，宽度总是根据每列内容自动设定。
表格结束需要保留空行，否则后续内容会被加入表格。

md表格效果
第1列 第2列 第3列 第4列
长列宽 左对齐 居中 右对齐
无效 有效 有效 有效

这段文字不在表格内

可以用于md表格的内容 
|设置项|效果|
|:---|:---:|
|加粗/斜体/下划线|***[u]文本[/u]***|
|颜色|[color=skyblue]文本[/color]|
|字体大小|[size=5]文本[/size]|
|预先格式化的文本|`文本`|
|表情| :ys_35_:|
|覆盖对齐|[right]文本[/right]|
|日期|[date=2025-03-26 format='LL' time=11:00:00 timezone="Asia/Shanghai"]|
|模糊的内容|[spoiler]文本[/spoiler]|
设置项 效果
加粗/斜体/下划线 文本
颜色 文本
字体大小 文本
预先格式化的文本 文本
表情 :ys_35_:
覆盖对齐
文本
日期 March 26, 2025
模糊的内容 文本

html比md好的地方只有一点：可以合并单元格。但是同样内容的表格要多写很多代码，而且html的代码块里md语法和bbcode是不生效的，限制比较大。

html表格代码及其效果 
<table>
<thead>
<tr>
<th>第1列</th>
<th>第2列</th>
<th align='center'>第3列</th>
</tr>
</thead>
<tr>
<td colspan=2>合并：2列1行</td>
<td rowspan=2>合并：1列2行</td>
</tr>
<td>**第1格**</td>
<td>[u]第2格[/u]</td>
</tr>
</table>
第1列 第2列 第3列
合并：2列1行 合并：1列2行
**第1格** [u]第2格[/u]
17

最后几个功能了…
在左侧插入floatl/在右侧插入floatr：
在应用了对齐标签的段落中，被floatl包裹的内容会始终处于左侧，而被floatr包裹的内容会始终处于右侧。
编辑器菜单只能生成floatl，而floatr需要手动输入。

[left]左对齐[floatl] :ys_039:[/floatl][floatr] :ys_001:[/floatr][/left]
[right][floatr] :ys_001:[/floatr]右对齐[floatl] :ys_039:[/floatl][/right]
[center][floatl] :ys_039:[/floatl][floatr] :ys_001:[/floatr]居中[/center]
效果

森林书 第一章
:ys_039:
:ys_001:

:ys_001:
残破的纸片
:ys_039:

:ys_039:
:ys_001:
不畏风雨

隐藏详细信息：
将部分内容包裹在内，要求点击打开才会显示。大段的次要内容建议使用，能有效控制单个帖子的页面高度。
前面帖子的各种“效果”都有用到，就不再来一遍了。

模糊剧透：
被包裹的内容会被模糊处理，点击一次后正常显示内容。
在PC端，会在鼠标悬停时变得更加清晰，以至于能够辨别部分文字的轮廓。

你有什么东西是不想让别人第一眼就看到的吗？要知道这只是一段模糊处理的文字，想看的人几乎不需要付出任何代价，所以它并不能真正地隐藏什么。

至此，目前存在于论坛编辑器菜单的基本功能就已介绍完毕，之后就是不定期更新了（大概率是遥遥无期了…）
会在编辑器菜单有更新、有实用功能需要总结，或是想到一些小技巧了再去更新。