固定大小的工作區

如要在網頁中加入 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，工具箱中有七個積木。請參閱這個即時示範。