发表于 2021-12-24 10:09:20
置顶卡
变色卡
楼主Discuz常用编辑器代码简介
应康娜大佬要求，写篇帖子简单介绍一下编辑器常用的代码/功能。毕竟是简单介绍，所以省略了不少细节，有什么错漏各位可以回帖指出。说明文字前的序号对应图片中图标的序号。
讽刺的是，HTML并没有方括号的转义字符，我无法在同一层楼里同时打出bbcode的纯文本和代码效果。因此，这篇文章只给出各种标签的使用方法，实际效果请各位自行尝试。
注：标题和文中的代码特指bbcode，也就是带方括号的编辑器代码，例如[color=Red]Hello[/color]。各个标签等效的HTML(或者CSS属性)我也顺手写了，但这个等效只是字面意思上的效果相同，并不一定是bbcode真正对应的HTML代码。
第一部分：左侧第一大栏
-
字体，代码为
[font=字体名称]文本内容[/font]，等效于HTML中的font-family。各位看哪个顺眼就用哪个，不过如果内容是代码的话建议使用等宽字体(或者下文会提到的代码插入功能)，例如下拉列表中的simsun。使用示例：[font=Impact]Impact字体[/font]
顺带一提，尽管编辑框里只提供了几种字体，但是理论上你可以在代码里填任意字体名称。只要看这个页面的人安装了你填的这种字体或者论坛安装了这种字体，它就能正常显示。举例来说，因为前段时间论坛换了模板，首页多了个时钟。这个时钟的数字用的字体叫
conv_pixel-lcd-7，你也可以把在帖子里使用它，例如：[font=conv_pixel-lcd-7]09:41[/font]。当然，不能保证论坛换了其他模板以后会不会有效。 -
字体大小，代码为
[size=字号]文本内容[/size]，等效于HTML中的font-size。除了论坛默认提供的1~7七个字号以外，px和pt这种绝对单位也是支持的。使用示例：[size=5]5号字体[/size] 或 [size=10.5pt]10.5pt大小[/size]
-
设置粗体，代码为
[b]文本内容[/b]，等效于HTML中的<b></b>或<strong></strong>。使用示例：[b]加粗文字[/b]
-
设置斜体，代码为
[i]文本内容[/i]，等效于HTML中的<i></i>或<em></em>。使用示例：[i]斜体文字[/i]
-
设置下划线，代码为
[u]文本内容[/u]，等效于HTML中的<u></u>或<ins></ins>。使用示例：[u]添加下划线的文字[/u]
-
字体颜色，代码为
[color=颜色名称]文本内容[/color]，颜色名称对大小写不敏感，等效于HTML中的color。这里的颜色名称除了英文单词外可以是RGB值，也可以是十六进制值。使用示例：[color=Red]红色文字[/color] 或 [color=rgb(255,0,0)]红色文字[/color] 或 [color=#DC143C]红色文字(严格来说这是猩红色)[/color]
-
文字背景颜色，代码为
[backcolor=颜色名称]文本内容[/backcolor]，等效于HTML中的background-color。颜色名称格式要求同上面的文字颜色。使用示例：[backcolor=Red]红色背景文字[/backcolor]
-
添加文字超链接，代码为
[url=链接地址]文本内容[/url]，等效于HTML中的<a href=""></a>。地址可以是相对路径，因此如果添加的页面链接就在论坛内，例如https://www.songshuxy.com/forum-43-1.html，则引号内可以不写主域名。这样的话以后论坛换了域名也不需要修改帖子里的链接了。特别要注意的是超链接似乎会覆盖掉文字的颜色。使用示例：[url=https://www.songshuxy.com/forum-43-1.html]音乐区[/url] 或 [url=forum-43-1.html]音乐区[/url]
- 移除超链接。这个没什么好说的，选中超链接的文字再点它就能移除超链接。如果带超链接的文字去除链接时没有全选，则未选中部分的超链接仍会保留。
- 清除文本格式。会清除掉例如字号，颜色之类的文字样式，但并不会清除文字包含的超链接（不然为什么要和上面那个功能分开来），也不会清除段落的对齐方式。
-
添加图片分割线。本质上是引用了discuz自带的图片，因为从它的代码可以看出这些图片在/static/image路径下（这实际和之后要讲的用[img]插入图片一致）。顺带一提，个人认为这几个用作分割线的图片看上去非常有年代感(褒义)。
使用示例：[img]static/image/hrline/4.gif[/img]
实际使用的时候直接点按钮就行，没必要开纯文本。 -
添加表格，语法与HTML类似，代码为
宽度和背景颜色可以不写。tr意为table row，即表格的一行；td意为table data，即为一个单元格。表格的背景颜色名称格式要求同上面的文字颜色。discuz似乎知道即使简化了HTML的表格语法，这玩意写起来还是太麻烦了，于是提供了一种简写的方法(Markdown是你吗)，如下图[table=宽度占整个帖子的百分比,背景颜色名称] [tr] [td]一行一列[/td] [td]一行二列[/td] [td]一行三列[/td] [/tr] [tr] [td]二行一列[/td] [td]二行二列[/td] [td]二行三列[/td] [/tr] [/table]
-
删除线，代码为
[s]要划去的内容[/s]，图片里没有但实际上可以使用的功能，对应HTML里的<s></s>或<del></del> -
水平分割线，代码为
[hr]，图片里没有但实际上可以使用的功能，对应HTML里的<hr>。
第二部分：左侧第二大栏
排版相关。
-
自动排版，这个功能会自动设置一些段落样式，实际上是三个属性的简写。代码格式为
[p=行间距,段首的缩进字符数,文字对齐方向]段落内容[/p]。对应的属性分别为line-height，text-indent和text-align。这个[p]貌似直接对应HTML里的<p> -
文字居左，这个功能会将段落中的每行文字靠左对齐。代码格式为
[align=left]段落内容[/align]。对应<div align="left"></div> -
文字居中，这个功能会将段落中的每行文字居中。代码格式为
[align=center]段落内容[/align]。对应<div align="center"></div> -
文字居右，这个功能会将段落中的每行文字靠右对齐。代码格式为
[align=right]段落内容[/align]。对应<div align="right"></div> -
左浮动。代码格式为
[float=left]左浮动的内容[/float]，对应float。这个应该主要用于修改图片的位置，比如让图片靠左，右侧有文字环绕(参考下面的截图)而不是图片和文字挤在一行导致文字上方有大量空白。我个人不太确定这个的细节，因为我测试下来感觉它和MDN上说的float似乎不完全一样。使用示例和效果：
-
右浮动。代码格式为
[float=right]右浮动的内容[/float]，对应float。除方向外和上面左浮动一致，不再赘述。使用示例和左浮动也基本一致，注意把需要浮动的图片写在文字的前面。
-
排序的列表。代码为
[list=1] [*]第一条内容 [*]第二条内容 [*]第三条内容 [/list]对应HTML里的
<ol><li></li></ol>。等号后面的1疑似只是为了和下面的无序列表区分开来，因为把它删除后它就变成无序列表了。 -
无序的列表。代码为
对应HTML里的[list] [*]内容一 [*]内容二 [*]内容三 [/list]<ul><li></li></ul>。
第三部分：左侧第三大栏
多媒体相关。
-
表情，这玩意我就不写格式了（因为目前两个表情包格式不太统一）。直接在菜单里挑自己想用的就行，注意纯文本模式下可能用不了。
-
图片，代码为
[img=宽, 高]图片文件地址[/img]，等于号和宽高可以不写。它又可以细分为三种情况：-
作为附件上传至论坛，标签是
[attachimg]论坛自动分配的图片编号[/attachimg]。具体用法参见总版规，记得上传之后要再单击图片才会把他加入到文字内容中，否则只会作为附件显示在帖子的下面。图片直接上传到论坛有一个好处：论坛首页的轮播图会出现你帖子里上传的图片，增加你帖子的曝光率。缺点是图片的数量和大小有限制，并且一旦哪天论坛被墙换了域名就很有可能会失效。P.S. 这种方法还会在你的主题帖标题旁边显示一个小图标
- 使用外部图床。找一个图床上传图片，然后在[img]标签里填上图片链接即可。总版规里有推荐的免费图床。这个方法的好处是图片不再占用论坛空间，所以图片的大小和数量限制完全取决于你使用的图床。缺点是外链图片不会出现在首页的轮播图上，所以你可以和上面的方法混着用——一张图片直接上传到论坛作为（首页可见的）缩略图，剩下的用外链图片。
-
使用论坛自带的图片（前提是你知道图片地址）。和上面一种情况类似，不过论坛的域名可以省略，例如
[img]/template/the_c_style/images/logo.png[/img]
-
作为附件上传至论坛，标签是
-
插入音乐。代码为
[audio]音频文件地址（直链）[/audio]。因为需要文件直链，个人认为用处有限。插入网抑云的外链播放器教程可以看这里。 -
插入视频。同样需要文件直链，用处有限。可以参考这篇教程插入外链播放器
-
插入flash文件。不建议使用，就算你真的有flash文件的直链，现在flash也已经被很多地方抛弃了。插入动图可以用[img]标签，视频和音乐可以用外链播放器，一些动画甚至能用svg (我没试过canvas但理论上应该可行)。flash的时代基本上是结束了，令人感叹。
-
@朋友，就和聊天软件里的@差不多。不过被@的人真的会来看帖子吗？我们不妨在这里随便@一个幸运儿试试@柚子
至于这个功能到底有没有用（似乎有因为我被@过），是不是限定好友（似乎不是），我暂且蒙在崛川雷鼓里。
第四部分：右侧第一大栏
一些奇奇怪怪的功能。
-
引用文字，用于存放不是你自己写的内容。代码为
[quote]引用的内容[/quote]。除了给引用的内容加上一个特殊的样式外，我暂时没看出这个标签的其他功能，欢迎各位补充。使用示例:[quote]真的猛士，敢于直面惨淡的人生[/quote]
-
设置免费可见内容，代码为
[free]购买主题前可见的免费内容，比如资源介绍和预览图[/free]。主要用于付费主题。使用示例:[free]我免费了[/free]
-
从word粘贴内容。这个要是想把它的细节摸清要说的可能就有点多了。简而言之，你可以把word文档中的内容直接粘贴进来，这个功能会尽可能保留你复制过来的word文档中内容的样式。它没有固定的标签，因为它会直接把word文档的样式转变为对应bbcode。我就是摆弄这个功能的时候发现[size]支持pt这个大小单位的，绝了。
没有使用示例，直接点击按钮使用即可。
-
分页，这个功能单独使用似乎没有效果，单击按钮后只会多一个
page标签 (我加了方括号以后这个标签被吞了，什么鬼，我明明禁用编辑器代码了)，也没有关闭标签。点击保存后除了多了一行空白以外似乎没有任何其他效果。如果有懂哥知道怎么回事的话欢迎在下面回个帖解释一下。 -
帖子密码：
[password]输入这里的密码才能看到帖子的内容[password](后面的password前很明显是有/的，这里没加上/是因为加上后这个代码就会生效，即使我已经禁用了编辑器代码)，如果输入了密码帖子内容却还没有显示的话可以刷新下页面试试。 -
添加起始动画：
[begin=超链接,宽,高,特效编号,停留秒数]图片素材地址[/begin]。超链接指的是点击图片素材以后可以打开的网站地址，可以不填。宽高的单位应该是像素，直接填数字即可，数值范围见该功能自带的说明。有效的特效编号为0，1，2：如果该值为0，则没有特效，点开这个主题贴后会直接显示图片素材。该值为1时效果为淡入淡出，2对应的是展开闭合。(说实话，这功能感觉和弹窗广告比较像...) -
引用代码：
[code]需要引用的代码[/code]，如果帖子里包含了大段代码内容的话用这个标签会更加清晰，不过如果直接把代码从其它IDE复制过来的时候要注意缩进有没有丢失。这个标签还额外实现了个一键复制代码功能，不过不知道为啥我测试下面这个例子的时候没法把代码复制到剪贴板，emm...使用示例：
[code] let user='bob' if(true){ // 注意这里的缩进 console.log(`Hello, ${user}!`) } [/code] -
隐藏内容，分为两种情况：
-
设置回复可见，格式为
[hide=有效天数]回复该帖才看得到的内容[/hide]。有效天数格式举例：[hide=d14]意为发帖后的14天内回复可见。这个天数也可以不填，相当于设置永久回复可见。 -
设置积分门槛，当浏览者积分高于某个值时才能看到隐藏内容。格式为
[hide=有效天数,积分值]积分高于该值才能看到的内容[/hide]。有效天数的格式和上面一样，可以不填，例如[hide=100]积分高于一百才能看到这句话[/hide]
-
-
下载远程附件。这个功能我也不是很懂，点击以后也没让填写链接就直接显示下载完成了，有知道的大佬可以补充下他是干什么的。
-
目录，我暂时没看出它和超链接相比有什么不可替代的地方，下面是discuz的官方说明：
-
添加主题帖的背景图片：
[postbg]背景名称[/postbg]。似乎只能使用论坛自带的背景图片，用外链图片的话代码会消失。背景为平铺同一张图片，无法修改拉伸、居中等。使用示例：
[postbg]bg8.png[/postbg]
总算写完了，明明是简介却写了这么多，工作量有点超出预期。之后还有什么细节需要补充的话我会持续更新。
发表于 2021-12-24 15:01:06
发表于 2021-12-25 10:05:54
