固定大小的工作区

将 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，工具箱中包含七个块。您可以点击此处查看实时演示。