# WYSIWYG 编辑器入门指南

# 快速介绍

### 认识布局

当我们点击 新页面 按钮时，系统将会引导我们至一个 “空白页面”，用于创建页面。如下图：

[![顶栏](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/QAgZy0V5I2HjifAu-2024-07-06-205926.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/QAgZy0V5I2HjifAu-2024-07-06-205926.png)

让我们按照从上往下，从左往右的顺序来介绍功能。

---

- 返回 ：退出当前编辑，如果你有修改内容，则系统将弹出通知询问你是否确认退出；
- 草稿选项 ：用于选择草稿选项，例如：保存草稿；
- 更新说明 ：用于总结你添加或修改的内容。当你单击 `保存页面` 时，你填入的总结文本将被显示在图书左侧；
- 保存页面 ：保存你对当前页面的修改，并返回你所编辑的页面所在的网页地址。

---

- 新页面 ：这是默认的“页面标题”，当你新建页面时，系统会自动选中此文本以供你快速编辑“页面标题”。

---

- 撤销 ：取消上一步你所做的修改，例如：编辑文本，应用样式，插入图片等；
- 重做 ：后悔或不小心点到了 `撤销`？通过此按钮将回到刚刚的状态。

---

- 段落 ：设置文本的大小和样式，我们最经常使用的功能就是它。
- ---
    
    **B** ：**加粗** 你选中的文本；
- *I* ：*倾斜* 你选中的文本；
- <span style="text-decoration: underline;">U</span> ：为你选中的文本添加 <span style="text-decoration: underline;">下划线</span>；
- A ：修改你选中的文本的 <span style="color: rgb(186, 55, 42);">文本颜色</span>；
- “马克笔图标” ：修改你选中的文本的 <span style="background-color: rgb(194, 224, 244);">背景颜色</span>；
- 更多 ···  
    
    - <s>S</s> ：为你选中的文本添加 <s>删除线</s>；
    - X<sup>2</sup> ：将你选中的文本添加 <sup>上标</sup> 样式；
    - X<sub>2</sub> ：将你选中的文本添加 <sub>下标</sub> 样式；
    - `< >` ：将你选中的文本添加 `行内代码` 的样式；
    - *I<sub>x</sub>* ：清除你选中的文本上 应用的样式。

---

- 左对齐 ：将你当前所编辑的行 向左对齐；
- 居中 ：将你当前所编辑的行 居中显示；
- 右对齐 ：将你当前编辑的行 向右对齐；
- 两端对齐 ：将你当前所编辑的行 向两端对齐。

---

- 无序列表：为当前编辑的行添加 无序列表 样式，一般用于陈列功能，选项等；

> - 异议 ：用来反对对方的观点；
> - 出示证物 ：向对方展示能够支持你观点的物品，例如：律师徽章。 
>     - 回车并按下 Tab 键即可创建此样式。

- 有序列表 ：为当前编辑的行添加 有序列表 样式，一般用于制作教程或者表明先后关系等；

> 1. 如果你想要新建或修改图书，你需要先拥有一个 VRCD 账号；
> 2. 单击此页面的右上角的 账号按钮 来注册账号。

- 更多 ··· 
    - 任务列表 ：为当前编辑的行添加在 编辑模式 可以勾选的复选框；

> - [ ] 更新 Unity Hub；
> - [ ] 教好友使用 Unity；
> - [x] 去外面吃炸鸡喝啤酒。

- - - 减少缩进 ：将 复选框 向左移动 一个单位；
        - 增加缩进 ：将 复选框 向右移动 一个单位。

> - [ ] 这是默认的 任务列表 行；
> 
> 当你在默认的 任务列表 行上点击 减少缩进 时，该行将变成普通行；
> 
> - - - - - [ ] 这是点了三次 增加缩进 的 任务列表 行；

---

- “锁链图标” ：用来在选中的文本上添加或编辑 [超链接](https://unity.cn/ "不要打开它。")；
- 表格 ：用来在新一行插入 表格，表格内允许所有的样式；

> <table border="1" style="border-collapse: collapse; width: 100%; height: 95.4844px;"><tbody><tr style="height: 35.8906px;"><td style="height: 35.8906px;">`<strong>加粗</strong>`  
> </td><td style="height: 35.8906px;">*斜体*</td><td style="height: 35.8906px;"><span style="text-decoration: underline;">下**划**线</span></td><td style="height: 35.8906px;"><s>这</s><sup>什</sup><sub>么</sub>`鬼`啊**淦！**</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">向左~</td><td class="align-right" style="height: 29.7969px;">向右~</td><td class="align-center" style="height: 29.7969px;">再居中~</td><td style="height: 29.7969px; text-align: justify;"><span style="color: rgb(224, 62, 45); background-color: rgb(0, 0, 0);"><s>*数据删除*</s></span></td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">- 1
> - 14 
>     - 1919
>     - 810
> 
> </td><td style="height: 29.7969px;">1. 填入 5；
> 2. 输出 14；
> 3. 播放答辩。
> 
> </td><td style="height: 29.7969px;">- [ ] **选我选我！**
> - [x] 韭菜盒子。
> - [ ] <s>VRChat？</s>
> - [ ] ***唢呐！***
> 
> </td><td style="height: 29.7969px;">[![图片.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-06/scaled-1680-/S21Ac1nD3dibuzxo-n8L2xLesES.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-06/S21Ac1nD3dibuzxo-n8L2xLesES.png)</td></tr></tbody></table>

- 插入图片 ：用来在新一行添加 图片，添加后可以调整图片大小。注意：要添加储存库没有的 图片，你需要在 图片选择器 的右上角先上传图片，上传完成后可以选中图片并 规范名称；

> [![一定要规范命名](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/HJAyZd6A3aOwxrRj-b7eaf0bf8efc5ee7a91d078c47626806.jpg)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/HJAyZd6A3aOwxrRj-b7eaf0bf8efc5ee7a91d078c47626806.jpg "精神状态绝佳")

- 更多 ··· 
    - — ：在新的行插入 水平分割线；

> 我在线的上面！
> 
> ---
> 
> 我在线的下面！

- - “插入代码块” ：在新的行插入用于展示代码的 代码块；

> ```c#
> using UnityEngine;
> 
> public class Hrenact : VRChatPlayer, IPickupable {
>     public override SexType Sex = SecType.Female;
> 
>     private void Start() {
>         var hello = $"Hello, there is ${Nickname}";
>       
>         Debug.Log(hello, this);
>     }
> 
>     public void Pickup() {
>         Debug.Log("Pickup!");
>     }
> }
> ```

- - 插入/编辑 绘图 ：用来制作 流程图 等图像。注意：此项功能无法编辑 上传的图片，你需要在上传前就编辑好对应的图片；

> <div drawio-diagram="1502"><img src="https://docs.vrcd.org.cn/uploads/images/drawio/2024-07/unkUGCEthURQt07Q-drawing-43-1720279001.png" alt=""/></div>

- - 插入/编辑 媒体 ：在新的一行添加一个视频窗口，用于播放你在编辑器内指定的视频；

> <iframe allowfullscreen="allowfullscreen" frameborder="no" height="387" scrolling="no" src="//player.bilibili.com/player.html?isOutside=true&aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1" style="width: 786px; height: 387px;" width="786"></iframe>

- - 插入可折叠块 ：在新的一行添加默认内容被折叠（不显示）的下拉框。

> <details><summary>这是 切换标签，用来概括折叠块的内容。</summary>
> 
> 和 表格 一样，这里允许所有的样式。  
> **Anything~**
> 
> </details>

---

- 源代码 ：用于查看当前编辑的内容的 源代码。不建议通过编辑源代码的方式进行编写，除非你知道自己在做什么！
- 关于编辑器 ：查看版权与许可信息，并显示可用 快捷键；
- 全屏 ：单击此按钮后，编辑器将进入 全屏模式，这将覆盖当前浏览器窗口的所有区域，再次单击退出 全屏模式。

# 详细介绍

在这里，我们将为你详细讲解那些值得一提或复杂的功能，来进一步学习如何 使用/操作 它们。

# 草稿选项

### 新建/编辑页面时

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/4g3qogB14t85UIqs-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/4g3qogB14t85UIqs-image.png)

当你新建或编辑页面时，`草稿选项` 将会显示为 **正在编辑页面。**

#### 保存草稿

将你正在编辑的内容保存为一个草稿，以避免在设备意外停止工作时丢失你所编辑的内容；

#### 切换到 Markdown 编辑器（整理内容）

此选项会尽可能将内容切换为 Markdown 格式，可能会在转换的过程中遗失一部分排版与格式；

#### 切换到 Markdown 编辑器（保留内容）

此选项直接将内容切换为 HTML 格式，看起来会略微繁琐，但能保留几乎所有的文本与多媒体格式。

---

### 保存草稿后

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/iogcXOZWdiZIjN0C-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/iogcXOZWdiZIjN0C-image.png)

手动或自动保存草稿后，`草稿选项` 将会显示 **草稿保存于 最后保存草稿的时间。**

#### 保存草稿

将你正在编辑的内容保存为一个草稿，以避免在设备意外停止工作时丢失你所编辑的内容；

#### 放弃草稿

取消编辑当前草稿，并将最新的页面内容同步到当前编辑器页面；

#### 删除草稿

删除当前编辑的草稿，并将最新的页面内容同步到当前编辑器页面；

#### 切换到 Markdown 编辑器（整理内容）

此选项会尽可能将内容切换为 Markdown 格式，可能会在转换的过程中遗失一部分排版与格式；

#### 切换到 Markdown 编辑器（保留内容）

此选项直接将内容切换为 HTML 格式，看起来会略微繁琐，但能保留几乎所有的文本与多媒体格式。

---

### 注意

`保存草稿` 并不会将你编辑的内容同步至页面，只有当你点击 `保存页面` 后，你才能让他人看到自己的劳动成果！

# 段落

点击 `段落` 后，你将看到一系列你可以选择的文本行样式。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/ZYKpu4FsyQSv1zio-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/ZYKpu4FsyQSv1zio-image.png)

每一个文本行只能选择一种标题样式，例如：你不能将 **大标题** 和 **微标题** 同时赋予在这一行的不同的文字上。

你可以在 **块引用** 内嵌套 **标注** 样式，但是你不能在 **标注** 样式内嵌套别的 **标注** 样式。如果你选择了别的样式，那么将会切换到你选择的样式。

---

## 大标题

### 中标题

#### 小标题

##### 微标题

段落

> 块引用

---

### 标注

<p class="callout info">信息  
</p>

<p class="callout success">成功</p>

<p class="callout warning">警告</p>

<p class="callout danger">危险</p>

---

### 注意

如果你想取消在编辑 **段落** 时按下 Enter键 后添加的空白行，你可以在按住 Shift键 后再按下 Enter键 来正常换行。

如果你想在编写 **标注** 时，将按下 Enter键 的行为切换为 **换行**，而不是新建 **标注**，你可以在按住 Shift键 后再按下 Enter键 来换行。

# 文本颜色 / 文本背景颜色

你可以通过 `文本颜色` 或 `背景颜色` 来让你的文本变得多姿多彩。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/3KFOV9wTC8Yie5DR-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/3KFOV9wTC8Yie5DR-image.png)

当你单击它们时，它们将在你选中的文本上应用目前选择的颜色。

在它们的右侧都有一个下拉框，单击即可打开颜色选择器。

---

### 基础颜色选择器

这是基础的颜色选择器，可以满足大部分的颜色需求，它们都选择了 纯黑 作为默认应用颜色。注意：在 纯黑 的右边，还存在着 <span style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">纯白</span>，请不要忽略它。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/bpoS3TeDSLYQKaaO-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/bpoS3TeDSLYQKaaO-image.png)

中下方的 **红色斜杠** 代表着清除当前文本上应用的 文本颜色 和 背景颜色，你也可以单击右下方的 **调色盘** 来打开 高级颜色选择器。

---

### 高级颜色选择器

这是更加完善的颜色选择器，有了它，你可以拥有任何你想要的色彩。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/V5u5aWlzfmDh9uuI-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/V5u5aWlzfmDh9uuI-image.png)

左侧的大方块用来调节 明度 和 饱和度，中间的竖条用来确定 色相。

你也可以通过输入颜色的 RGB值 或 十六进制颜色代码（如：#FF3301，#377B71） 来更精确的定位你需要的颜色。

---

### 注意

在设置 **文本颜色** 或 **文本背景颜色** 时，你应该避免它们之间的颜色过于相近。这会造成不好的阅读体验，并且可能会被管理员修改至合适的颜色。

此网页同样具有 **深色模式**，在考虑配色时也应该考虑在这种模式下的阅读体验。

<table border="1" id="bkmrk-%E4%B8%BA%E4%BA%86%E9%98%85%E8%AF%BB%E4%BD%93%E9%AA%8C%EF%BC%8C%E6%B8%A9%E9%A6%A8%E6%8F%90%E7%A4%BA-%E8%AF%B7%E4%B8%8D%E8%A6%81%E5%86%8D%E7%99%BD%E5%BA%95%E4%B8%8A%E5%86%99" style="border-collapse: collapse; width: 100%; height: 258.55px; border-width: 1px;"><colgroup><col style="width: 33.3651%;"></col><col style="width: 33.3651%;"></col><col style="width: 33.3651%;"></col></colgroup><tbody><tr style="height: 64.6375px;"><td colspan="3" style="height: 64.6375px;">##### **为了阅读体验，温馨提示**

</td></tr><tr style="height: 64.6375px;"><td style="height: 64.6375px; background-color: rgb(255, 255, 255);">##### **<span style="color: rgb(241, 196, 15);">请不要再白底上写黄字</span>**

</td><td style="height: 64.6375px; background-color: rgb(241, 196, 15);">##### **<span style="color: rgb(255, 255, 255);">更不要在黄底上写白字</span>**

</td><td class="align-center" style="height: 64.6375px; background-color: rgb(0, 32, 63);">##### <span style="color: rgb(0, 0, 0);">**写黑字**</span>

</td></tr><tr style="height: 64.6375px;"><td style="height: 64.6375px; background-color: rgb(45, 194, 107);">##### **<span style="color: rgb(224, 62, 45);">或者绿底写红字</span>**

</td><td rowspan="2" style="height: 129.275px; background-color: rgb(120, 71, 21);">### **<span style="color: rgb(186, 55, 42);">或者邻近色搭配</span>**

</td><td class="align-center" style="height: 64.6375px; background-color: rgb(194, 224, 244);">##### <span style="color: rgb(255, 255, 255);">**写白字**</span>

</td></tr><tr style="height: 64.6375px;"><td style="height: 64.6375px; background-color: rgb(224, 62, 45);">##### **<span style="color: rgb(45, 194, 107);">或者反过来</span>**

</td><td style="height: 64.6375px; background-color: rgb(53, 152, 219);">##### **<span style="color: rgb(126, 140, 141);">写灰字？？</span>**

</td></tr></tbody></table>

# 超链接

有了它，你可以让读者点击一段文字时，跳转到事先设置好的网站。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/pJcijZfFk310G8Zm-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/pJcijZfFk310G8Zm-image.png)

---

### 网址

你可以在此填入跳转的目标网站，或者单击右侧的 **浏览链接** 图标可以浏览文档库中的图书并快速制作它们的超链接。

### 要显示的文本

超链接在页面中显示的文本，如果你填入了 前往第三方网站，那么超链接将在页面中显示为 [前往第三方网站](https://unity.cn/)。

### 标题

当光标在超链接上悬停时，显示的预览文本。[将光标悬停在我身上来查看效果](https://unity.cn/ "预览文本：Ciallo～(∠・ω< )⌒★")。

### 打开链接于……

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/14tR2s9BQTo1WKwq-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/14tR2s9BQTo1WKwq-image.png)

**覆盖当前窗口** ：直接替换当前打开的网页并打开链接；

**新建窗口** ：在新的浏览器页面打开链接。

---

### 超链接工具

如果你忘了设置哪一项属性，或需要修改某项属性，亦或者想要预览设置好的页面，你可以单击已经设置好的 超链接 来打开 超链接工具。

从左到右分别为 `修改超链接`，`取消超链接`，`预览网页`。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/eTrHd7DPhX5mQ0de-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/eTrHd7DPhX5mQ0de-image.png)

**修改超链接** ：可以让你再次编辑超链接属性，直到满意为止；

**取消超链接** ：取消这段文本上应用的超链接，让它变回普通文本。

**预览网页** ：用来预览你在属性中填入的目标网站，不受 打开链接于 属性影响，始终在新的浏览器页面打开。

---

### 注意

在制作超链接时，你应该遵守 VRCD 规范，不将超链接指向 涉黄，恐怖，暴力 等 NSFW 网站，否则将会被管理员撤销图书编辑权限！

# 插入表格

相当于 Microsoft Word 的表格功能，但更加简略和方便编辑。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/eMixAiBxq5gESX3g-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/eMixAiBxq5gESX3g-image.png)

---

### 快速创建表格

单击 `表格`，将鼠标移动到弹出的下拉框内的 **表格** 选项上，即可通过移动鼠标的方式确定 表格 有几行和几列，按下鼠标左键即可按照选择的行和列数创建表格。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/M5tDYjFIqMk28C7U-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/M5tDYjFIqMk28C7U-image.png)

例如：7x5 代表着 5行 7列 的表格。

---

### 单元格

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/mnRemADS8PrqdZwP-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/mnRemADS8PrqdZwP-image.png)

- **单元格属性** ：用于设置当前选中的单元格的一系列属性；
    
    
    - **通用** ：宽度，高度，单元格类型，范围，水平对齐，垂直对齐；
    - **高级** ：边框宽度，边框样式，边框颜色，背景色。
- **合并单元格** ：将选中的多个单元格合并为一个单元格；
- **拆分单元格** ：将合并后的单元格拆分为合并前的多个单元格。

---

### 行

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/WcOxfWh4X1nw7YOY-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/WcOxfWh4X1nw7YOY-image.png)

- **在上方插入行** ：在当前行的上方创建新的行；
- **在下方插入行** ：在当前行的下方创建新的行；
- **删除行** ：删除选中的这一行；
- **行属性** ：用于设置当前行的一系列属性； 
    - **通用** ：行类体，对齐方式，高度；
    - **高级** ：边框样式，边框颜色，背景色。
- **剪切行** ：将这一行的数据储存起来，并配合 在上方/下方粘贴行 来移动位置；
- **复制行** ：将这一行的数据储存起来，用于在别处创建一模一样的行；
- **在上方粘贴行** ：在当前行的上方粘贴通过 剪切 或 复制 得到的行以及数据；
- **在下方粘贴行** ：在当前行的下方粘贴通过 剪切 或 复制 得到的行以及数据；

---

### 列

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/47wHMeroJskj9s9o-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/47wHMeroJskj9s9o-image.png)

- **在左侧插入列** ：在当前列的左侧创建新的列；
- **在右侧插入列** ：在当前列的右侧创建新的列；
- **删除列** ：删除选中的这一列；
- **剪切列** ：将这一列的数据储存起来，并配合 在上方/下方粘贴列 来移动位置；
- **复制列** ：将这一列的数据储存起来，用于在别处创建一模一样的列；
- **在左侧粘贴列** ：在当前行的左侧粘贴通过 剪切 或 复制 得到的列以及数据；
- **在右侧粘贴列** ：在当前行的右侧粘贴通过 剪切 或 复制 得到的列以及数据；

---

### 表格属性

- **通用**
    - **宽度** ：拥有两种编辑形式，数字加百分比 的形式将按照表格相对于页面宽度的比例来进行设置。例如：100%，75%。直接填写 数字 或者 数字加 px 的形式将精确到像素大小。例如：750px，100px。 
        - **单元格间距** ：设置每一列文本到单元格边框的间距，支持百分比与像素。留空来回到初始设置。
    - **高度** ：通过填写 数字加 px 的形式将精确到像素大小。例如：750px，100px。留空来回到初始设置。 
        - **单元格间距** ：设置每一行文本到单元格边框的间距，支持百分比与像素。留空来回到初始设置。
    - **边框宽度** ：设置单元格的边框宽度，仅支持像素；
    - **标题** ：当你勾选此复选框后，将在表格顶部添加一个可以用于概括表格内容的文本，单击即可编辑；
    - **对齐方式** ：设置表格的对齐方式。向左，居中或向右；
- **高级** ：边框样式，边框颜色，背景色。

---

### 表格工具

单击表格中的任意元素即可显示 表格工具。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/MyqGYwce0U1314Wr-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/MyqGYwce0U1314Wr-image.png)

从左到右分别为 `表格属性`，`删除表格`，`在上方插入行`，`在下方插入行`，`删除行`，`在左侧插入列`，`在右侧插入列`，`删除列`，`行头`。

**行头** ：为当前行添加一个浅浅的背景色来着重显示。

# 插入图片

单单的文字教程太枯燥乏味难以下咽？你可以适当的配合图片来让读者更容易理解你所表达的内容。

[![cac9d3e1bf6e14809efd9f73a4a4e82f.jpg](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/0wPYffgwrf0frNpU-cac9d3e1bf6e14809efd9f73a4a4e82f.jpg)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/0wPYffgwrf0frNpU-cac9d3e1bf6e14809efd9f73a4a4e82f.jpg)

不，这个图片和教程没有任何关联，只是为了逗你一笑。

---

### 图片选择器

如果你要添加图片，你需要先单击 图片 按钮来打开 图片选择器。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/b7aqLM2dsbVieIZ4-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/b7aqLM2dsbVieIZ4-image.png)

我们按照从上往下和从左往右的顺序来介绍各项功能。

- **上传图片** ：如果 图片选择器 里没有你需要的图片，那你可以使用此按钮来从你的设备上上传你需要的图片；
- **按图片名称搜索** ：这个就不需要解释了吧，最常见的搜索功能；
- **查看所有图片**
- **查看上传到本图书的图片**
- **查看上传到本页面的图片**
- **图片选择区** ：选中图片以在右侧查看或编辑详细信息；
- **图片名称** ：查看或修改图片的名称，便于搜索和管理；
- **更多 ···**
    - **删除** ：删除选中的图片，这将导致所有引用了此图片的页面不再显示此图片；
    - **替换图片** ：重新上传一张新的图片用于替换当前选中的图片，所有使用了此图片的页面将会显示新的图片；
    - **重新生成大小变化** ：当新的图片与旧的图片比例不一致时，你可以尝试使用此选项来修复排版问题。
- **保存** ：保存你所做的图片属性修改；
- **上传到 超链接** ：用于显示这张图片最开始在哪里被使用，点击 超链接 即可前往它的页面；
- **选择图片** ：将你在 图片选择区 选中的图片导入至页面中。

---

### 其它插入方式

如果你的系统和应用支持，你可以直接右键 源图片 并复制，然后在你编辑的页面粘贴，图片将会被自动上传并插入。此时在 图片选择 内，**图片名称** 将会显示为 源图片 文件名称。

Windows 系统的 截图工具，以及使用 PrtSc键 截图的图片，皆可直接在编辑的页面粘贴来插入。此时在 图片选择器 内，**图片名称** 将会显示为 image.png 。

---

### 图片工具

当你单击已经插入至页面的图片时，将会显示 图片工具。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/TvvjezjZ3pZnhblg-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/TvvjezjZ3pZnhblg-image.png)

从左到右依次为 `插入/编辑链接`，`移除链接`，`打开链接`，`插入/编辑图片`。

图片和文本一样，可以添加 超链接，但有所不同。

#### 插入/编辑链接

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/y7LVjXOPcb2r1fIq-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/y7LVjXOPcb2r1fIq-image.png "点我来在新窗口查看源图片。")

- **网址** ：默认显示为图片储存的地址。你也可以在此填入跳转的目标网站，或者单击右侧的 **浏览链接** 图标可以浏览文档库中的图书并快速制作指向它们的超链接；
- **标题** ：当光标在图片上悬停时，显示的预览文本；
- **打开链接于……**
    - **覆盖当前窗口** ：直接替换当前打开的网页并打开链接；
    - **新建窗口** ：在新的浏览器页面打开链接。

#### 移除链接

删除图片的超链接属性，此时点击图片将没有任何反应。

#### 打开链接

只有在你修改了 网址 这一属性后，该按钮才可用。用来预览你在属性中填入的目标网站，不受 打开链接于 属性影响，始终在新的浏览器页面打开。

#### 插入/编辑图片   


[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/IBBOFQscDsoMUA2m-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/IBBOFQscDsoMUA2m-image.png)

- **来源** ：用于修改图片来源，你也可以单击右侧的 **浏览文件** 图标来打开 图片选择器；
- **替代描述** ：当图片在 图片编辑器 内的 **图片名称** 非默认值时，此文本将会显示 图片名称。你也可以修改它，修改不会同步至 图片名称；
- **宽度 / 高度** ：用于设置图片在页面上显示的大小，只支持罗马数字。点击右侧的 锁 即可取消在修改时保持比例。

---

### 注意

图片选择器 目前只支持上传 `*.xbm`，`*.tif`，`*.jfif`，`*.ico`，`*.tiff`，`*.gif`，`*.svg`，`*.jpeg`，`*.svgz`，`*.jpg`，`*.webp`，\*`.png`，`*.bmp`，`*.pjp`，`*.apng`，`*.pjpeg`，`*.avif` 格式的图片。

如果一个图片在插入页面后显示的过大，你可以选中它以在图片的四个角显示用于调整大小的枢轴。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/E7BPAWrNZkFEJPCx-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/E7BPAWrNZkFEJPCx-image.png)

在上传/插入图片时，你应该遵守 VRCD 规范，不上传/插入 涉黄，恐怖，暴力 等 NSFW 内容的图片，否则将会被管理员撤销图书编辑权限！

# 插入代码块

居然要用到代码块，想必你一定是位编程高手吧。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/bGufGswT7wRXb5sb-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/bGufGswT7wRXb5sb-image.png)

让我们按照从上往下和从左往右的顺序来介绍 代码块编辑器。

- **会话历史** ：这里保存着当前 代码块 的编辑历史，如果你想要查看之前的内容或撤回更改，请善用此功能；
- **编程语言** ：可以选择 代码块 中代码所属的语言，按下 星星图标 来收藏此语言并靠前显示。你也可以自己手动输入来指定语言；
- **代码编辑区** ：用于编写代码，当你按下 保存代码 后，你编写的代码将会显示在 代码块 中，并在 **会话历史** 中保留纪录。

```Jvav
// Jvav is the best language ever!

public cl4ss H3ll0W0rld {
    public st4tic v01d ma1n(String[] 4rgs) {
        System.0ut.println("H3ll0 W0rld!");
    }
}
```

### 注意

如果你想要编辑已经保存的 代码块，单击 代码块 后，将会显示 修改图标，单击来进入 代码块编辑器。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/dccXXhz9TmF5vLvy-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/dccXXhz9TmF5vLvy-image.png)

# 插入绘图

使用 绘图 来展示一个脚本或动画的工作原理最好不过的方式了。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/QZaqEByj6Zu89Iqr-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/QZaqEByj6Zu89Iqr-image.png)

直接点击 绘图 按钮会立马跳转至 新建绘图 的界面，如果点击 绘图管理器，即可打开 绘图管理器 界面并选择已经存在的绘图。

因为 绘图 可以做的事情太多了，所以本页面只会教你基础功能，剩下的就看你自己造化了。

### 认识基础布局

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/Ivfmfrl0mrrKMpou-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/Ivfmfrl0mrrKMpou-image.png)

在页面左侧，存放着最基础的图形模板，你可以通过 单击 或者 按住并拖动 来在画布上创建图形；

在页面右侧，可以设置当前选中的图形的各种属性：样式 可以用来调整图形的 着色样式；如果图形内有文本，则可以通过 文本 来调整 文本的字体、颜色、背景色 等；如果图形的排序方式或位置不满意，则可以通过 调整图形 来像 PS 一样挪动位置和调整图层顺序；

注意：如果没有选中图形，则页面右侧为调整画布的属性；

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/PlwnTxJpndn7iy5L-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/PlwnTxJpndn7iy5L-image.png)

你可以选择左上角的 **文件 - 从…导入 - 浏览器 / 设备 / URL** 来将外部图片导入至画布中；

**保存** ：保存当前的画布并导入至正在编辑的页面中；

**退出** ：不保存并返回之前正在编辑的页面。

### 调整图形

基础图形分为两种，可填写文字类 与 箭头类，我们将分别介绍它们如何编辑。

#### 可填写文字类

这类图形在导入画布后，双击即可在内部编写文字。单击选中一个图形，即可看见如下图的小工具。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/9TpkhHMf1gKcCqfH-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/9TpkhHMf1gKcCqfH-image.png)

- **圆点** ：用于调整图形大小，用鼠标按住并拖动以调整大小；
- **箭头** ：用于从最近的小圆点位置快速创建箭头来指向另一个图形；
- **旋转箭头** ：用于旋转图形，默认只能以 5度 为一个单位进行旋转。

双击图形即可在内部编写文字，当你编写时，页面右侧会自动替换为 文字属性 设置页面。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/NEhlgpEjdo51QusK-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/NEhlgpEjdo51QusK-image.png)

#### 箭头类

箭头可以用于连接 图形，用来表示图形之间的因果关系或者前后顺序，选中一个箭头，即可编辑它的朝向。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/0lajM82xbl2fqI6b-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/0lajM82xbl2fqI6b-image.png)

- **圆点** ：前后两端的圆点用于设置箭头从哪里开始，到哪里结束。稍大的圆点代表着箭头的朝向，或者说结束的地方；
- **半透明圆点** ：想要让箭头转弯？没问题，拖动此圆点来创建箭头拐角。别担心，你可以创建多个拐角。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/RbEEi7esZE4DznFC-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/RbEEi7esZE4DznFC-image.png)

### 注意

在插入绘图时，你应该遵守 VRCD 规范，不插入 涉黄，恐怖，暴力 等 NSFW 内容的绘图，否则将会被管理员撤销图书编辑权限！

# 插入多媒体

使用此功能，您可以在文档中插入视频，音频等 **在线媒体资源**。

[![348c7a6aa0accfdf892a0cb8c1ff6ac5.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/xN6m81UJqWZDaIEE-348c7a6aa0accfdf892a0cb8c1ff6ac5.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/xN6m81UJqWZDaIEE-348c7a6aa0accfdf892a0cb8c1ff6ac5.png)

### 页面/功能介绍

#### **通用**

您可以在此界面输入您想要引用的媒体网址链接以直接引用媒体，并且决定该媒体的显示大小。

- **来源**：您想要引用的媒体网址链接。
- **宽度/高度**：该媒体在文档中显示的宽高大小。

**[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/vlOCVHbFYwDpZR9W-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/vlOCVHbFYwDpZR9W-image.png)**

##### **示例**

<audio controls="controls" src="https://music.163.com/song/media/outer/url?id=1399616170.mp3"></audio>

<video class="" controls="controls" height="150" width="300"><source src="https://dn720303.ca.archive.org/0/items/rick-astley-never-gonna-give-you-up-hd-4-k-60-fps/Rick%20Astley%20Never%20Gonna%20Give%20You%20Up%20HD%204K%2060%20FPS.mp4" type="video/mp4"></source></video>

---

#### **嵌入**

您可以在此界面输入指定媒体的嵌入代码，此功能面向那些并不直接提供在线媒体资源，但允许视频通过嵌入形式访问的网站服务（哔哩哔哩，Youtube 等）

**[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/Q31zv0pcmsCEJLhf-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/Q31zv0pcmsCEJLhf-image.png)**

##### **示例**

以 <span style="color: rgb(255, 50, 155);">哔哩哔哩 </span>为例，将鼠标移动到视频下方的分享按钮，在展开的页面右下角点击 **"嵌入代码"** 以复制。

[![99d61630e5f6a783743c63b11fd7fa3d.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/SmkwCJ9OjluslQNw-99d61630e5f6a783743c63b11fd7fa3d.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/SmkwCJ9OjluslQNw-99d61630e5f6a783743c63b11fd7fa3d.png)

回到文档编辑页面，根据上述步骤点击 “插入视频/媒体” ，并将复制好的代码粘贴进输入框中，点击右下角保存即完成操作。

<iframe allowfullscreen="allowfullscreen" frameborder="no" height="300px" scrolling="no" src="//player.bilibili.com/player.html?isOutside=true&aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1" width="600px"></iframe>

# 可折叠块

可折叠块 能够用于默认隐藏一些可以选择性阅读的文本。

### 编辑 可折叠块

创建 可折叠块后，你无法直接编辑它，你需要先选中 可折叠块，并通过 可折叠块工具 来调整它。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/9opYXRKWUMHjMABf-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/9opYXRKWUMHjMABf-image.png)

从左到右依次为 `编辑可折叠块`，`展开可折叠块`，`删除可折叠块`。

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/dcJ8w2qnRyzQvjdY-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/dcJ8w2qnRyzQvjdY-image.png)

- **编辑可折叠块** ：切换标签 用于概括可折叠块的内容；

[![image.png](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/scaled-1680-/rol6PRnfuTK7OvK3-image.png)](https://docs.vrcd.org.cn/uploads/images/gallery/2024-07/rol6PRnfuTK7OvK3-image.png)

- **展开可折叠块** ：展开默认被隐藏的折叠块，并在里面输入内容；
- **删除可折叠块** ：顾名思义，删除它。

注意，无论你在编辑页面的 可折叠块 是否为展开状态，保存后都会默认被折叠。