Workspace có kích thước cố định

Cách đơn giản nhất để đặt Chặn vào một trang web là chèn trang này vào một thẻ "div" trống.

1. Lấy mã

Lấy mã theo bất kỳ cách nào phù hợp nhất với ứng dụng của bạn.

2. Xác định khu vực

Thêm một div trống ở đâu đó trong phần nội dung của trang và đặt kích thước của nó:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. Chèn không gian làm việc

Xác định cấu trúc hộp công cụ:

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"
    },
  ]
}

Và cuối cùng, hãy gọi lệnh sau để chèn Blockly vào div đã xác định của bạn.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Biến workspace hiện không được sử dụng, nhưng sau này, biến workspace sẽ trở nên quan trọng khi bạn muốn lưu các khối hoặc tạo mã. Nếu nhiều thực thể của Blockly được chèn vào cùng một trang, hãy đảm bảo rằng mỗi không gian làm việc đã trả về được lưu trữ trong một biến khác nhau.

Bây giờ, bạn có thể kiểm tra trang trong một trình duyệt. Bạn sẽ thấy trình chỉnh sửa của Blockly đang điền div với 7 khối trong hộp công cụ. Đây là bản minh hoạ trực tiếp.