固定大小的工作区

将 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，并在工具箱中填充 7 个块。欢迎观看现场演示。