创建工作区

Blockly 工作区是 Blockly 的最高级别组件。您可以使用此界面通过代码块进行编程。

如需详细了解工作区及其子组件，请参阅可视化术语表。

注入 div

必须将 Blockly 工作区注入到 <div> 中，该 <div> 称为“注入 div”。

注入 div 的大小可以静态或动态调整。div 中的 Blockly 元素会在窗口调整大小时更新其大小。

以下代码段展示了静态大小的注入 div 的 HTML：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

注射

注入会创建构成工作区界面的所有 HTML 子元素。它还会执行所有必要的初始化操作，以使工作区准备就绪，可供使用。

注入函数可以接受注入 div 的 ID，也可以接受注入 div 本身：

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

配置

在注入期间，可以使用多种选项（例如布局和样式）配置工作区。

如需详细了解配置选项，请参阅配置选项。