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

วิธีที่ง่ายที่สุดในการใส่ 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 บล็อกในกล่องเครื่องมือ นี่คือการสาธิต แบบสด