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ã

Nhận 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 đâu đó 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 đoạn mã sau để chèn Blockly vào div mà bạn đã xác định.

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

Biến workspace hiện không được dùng, nhưng sau này sẽ trở nên quan trọng khi người dùng muốn lưu các khối hoặc tạo mã. Nếu có nhiều thực thể 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ề đều được lưu trữ trong một biến khác.

Giờ đây, 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.