可视化编辑
最后更新于:2022-04-02 06:53:30
## 切换可视化编辑模式
要切换到可视化编辑,可以在编辑界面点击右下角的![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/0b70cb8a9b8495cdfd55baf0da9543ac_38x34.png)按钮,然后点击![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/363fbf21b5e8d890c5ea5e1c2f12bd6c_141x41.png)切换到可视化编辑模式,如果再次点击则切换回`MD`编辑器模式。
切换到可视化编辑模式后,左侧的目录栏保持不变,页面右侧的编辑和预览区域变成了一个可视化编辑区,在切换可视化编辑模式的时候,会自动对当前章节的内容重新进行格式化以满足可视化编辑的需求,所以,你可能会看到左下角显示![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e891ec508c96175df8b269a2f74c99bb_171x31.png),并且![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/51aff0950b07d0786e46bc6645f3d1ec_42x39.png)按钮变色,这是正常情况,但不会丢失内容请不需要担心。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/454c37b4ee507dd9fe576cee9a2b614f_1233x702.png)
在可视化编辑模式下面,除了显示更直观外,很多功能操作也更容易了。下面就给大家具体介绍下,可视化编辑模式下的一些操作技巧。
> 首先要注意的是,可视化编辑模式下面,所有的快捷键操作依然保留并且和MD编辑器模式一致。
> 并且可视化编辑模式下,自定义样式不会生效,必须在发布情况下阅读,或者全文预览的时候才能生效。
## 引用样式
如图所示,在引用段落前面会出现一个向下的箭头
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e6bb807a7ee092321a67b8399cf14cea_357x137.png)
点击该箭头部分可以出现引用样式功能选项
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e018c38ae806f39a47a108640a81acd4_418x360.png)
点击不同的样式可以看到不同的引用显示效果。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/b7c265c1819d0236fdbc88ebd5e1aee7_619x133.png)
## 图片操作
点击![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/8cff384032cdc5800c859def17b69122_33x30.png)按钮或者使用`CTRL+ALT+Y`快捷键可以上传本地图片,也可以直接粘贴图片或者截图。
图片插入后,鼠标移动到图片上的时候会显示一个绿色的边框,点击图片就可以设置图片的显示大小以及删除图片。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/880cbe33b266d5caa253deeffd95d0fe_359x283.png)
选中图片后,点击居中对齐按钮,图片就会居中对齐。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/db2b6d94cced2c5cdb8e7475b726cc5a_905x505.png)
## 添加超链接
选中文字后点击![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/ba3767dc9f95f7312fdc20cd9a0017d1_31x31.png)按钮或者使用`CTRL+L`快捷键可以给文字添加链接地址。
当文字颜色变蓝后,点击文字会出现一个输入框让你输入链接地址,你可以直接输入章节标题或者外部链接。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/f85cee1ef8f8c883e7f71abd26716167_521x165.png)
支持当前文档的章节自动完成,由于我们当前只有一个空白目录,效果如下:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e5d0c1695dbff160b1a9b87bd73a9ab9_320x134.png)
下面会自动列出和当前输入匹配的章节名称,选择某个目录即可。
再次点击链接文字就会显示当前的链接地址,你可以进行编辑。
## 任务列表
任务列表也支持可视化编辑,点击![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/9f51eaa536d4898d11bdee69d7161520_28x30.png)按钮或者使用`CRTL+ALT+T`快捷键会生成一个空白任务列表。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/5866a73c55b435f8f55956e3ac60c012_219x117.png)
添加任务项和子任务项目(使用TAB键缩进即可)。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/fb5950cdaee0b7e003e49c6d620f6686_239x209.png)
点击前面的灰色方块可以设置任务的完成情况。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/6547f8649ea0cac845e468fb9182c99d_243x199.png)
## 添加表格
点击工具栏的![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/6ec9a34cef82c6b0019af3ff63820179_30x30.png)按钮,会生成如下的默认表格。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/16bf490e0cd52e3f78fff74ca0283b20_860x92.png)
第一行是表头,默认会采用粗体显示。如果要增加一行的话,直接敲回车键即可。
在表格内部点击鼠标右键会出现操作菜单,支持增加一行、一列以及删除当前行和当前列,或者直接删除表格。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/78c78589570ee15a5ddce996247e9b73_850x274.png)
由于MD规范的限制,无法实现跨行跨列的操作。
## 复制粘贴
在可视化编辑模式下,支持`HTML`粘贴,会自动转换为MD格式内容和可视化显示。
如果需要粘贴的时候丢弃`HTML`格式,可以右键选择粘贴为纯文本或者使用`CTRL+SHIFT+V`快捷键粘贴。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/9258a2c9211573a93c831e944aac933b_245x350.png)
## 章节导航
可视化编辑模式下,点击![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e937742ea97a899571041885f1ab9d8_27x29.png)按钮可以在当前位置插入章节导航。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/b45c267ae087918fad208f404a2bcaa7_881x224.png)
点击章节导航区域会显示导航显示设置和删除按钮。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/1b736be62fbc82fb173e96e773553f27_863x229.png)
我们改为只显示H2和H3目录导航
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/22c73d4d4ec647a0f72dd368cda1b645_866x235.png)
';