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