Рабочее пространство фиксированного размера

Самый простой способ разместить 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, убедитесь, что каждое возвращаемое рабочее пространство хранится в отдельной переменной.

Теперь вы можете протестировать страницу в браузере. Вы должны увидеть, как редактор Blockly заполняет div с семью блоками на панели инструментов. Вот живая демонстрация .