HTML 编辑器 UI

可以在画布中添加、配置或删除元素。此外,还可以导入导出 HTML 和 CSS 代码。本章节介绍如何设置编辑器的面板。

Blocks 标签页

在运行的应用程序中打开 HTML 编辑器后,可以看到 Blocks 标签页。

GrapesJS 中的 block(块)是一段可重用的 HTML,支持拖放至画布。

根据添加的 UI 组件 不同,元素列表也不一样。可以添加下列元素:

  • Basic 部分:ColumnsTextImageVideoMapLinkText SectionLink Block

  • Extra 部分:NavbarTabsCustom Code

  • Forms 部分:FormInputTextareaSelectButtonLabelCheckboxRadio

html editor ui

Style Manager 标签页

可以设置元素的属性。选择元素然后切换至 Style Manager 标签页。

style manager tab

Trait Manager 标签页

可以定义元素的参数。选择元素然后切换至 Trait Manager 标签页。

trait manager tab

Layers 标签页

如需查看画布中元素的列表,切换至 Layers 标签页。编辑时,可以隐藏画布中的元素。

layers tab

顶部面板按钮

顶部面板可使用下列按钮:

  • Show borders(展示边框) 按钮

  • Preview(预览) 按钮

  • Full-screen(全屏) 按钮

  • Export(导出) 按钮

  • Undo(撤销) 按钮

  • Redo(重做) 按钮

  • Import(导入) 按钮

  • Clear canvas(清空画布) 按钮

  • 以及更改界面宽度的按钮

top panel