Không gian làm việc có kích thước cố định

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

1. Lấy mã

Tải mã theo cách 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 vào vị trí bất kỳ trong phần nội dung của trang và đặt kích thước cho div đó:

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

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

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

Biến workspace hiện không được sử dụng, nhưng sẽ trở nên quan trọng sau này khi người dùng 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 được trả về được lưu trữ trong một biến khác nhau.

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