固定大小的工作區

如要將 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，而工具箱中有七個區塊。請看現場示範。