พื้นที่ทํางานที่มีขนาดคงที่

วิธีที่ง่ายที่สุดในการใส่ 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 มากกว่า 1 รายการในหน้าเดียวกัน ให้ตรวจสอบว่าพื้นที่ทํางานที่แสดงผลแต่ละรายการจัดเก็บไว้ในตัวแปรอื่น

ตอนนี้คุณทดสอบหน้าเว็บในเบราว์เซอร์ได้แล้ว คุณควรเห็นเครื่องมือแก้ไขของ Blockly แสดงใน div โดยมีบล็อก 7 รายการในกล่องเครื่องมือ นี่เป็นการสาธิตเวอร์ชันที่ใช้จริง