固定大小的工作区

将 Blockly 放入网页的最简单方法是将其注入到空的“div”标记中。

1. 获取代码

以最适合您应用的方式获取代码。

2. 定义区域

在网页正文中的某个位置添加一个空的 div 并设置其大小：

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

3. 注入工作区

定义工具箱结构：

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

最后，调用以下内容将 Blockly 注入到您定义的 div 中。

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

workspace 变量目前未使用，但稍后当用户想要保存块或生成代码时，它将变得非常重要。如果将多个 Blockly 实例注入到同一网页上，请确保每个返回的工作区都存储在不同的变量中。

现在，您可以在浏览器中测试该网页。您应该会看到 Blockly 的编辑器填充了 div，工具箱中有七个块。以下是实时演示。