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

Самый простой способ разместить 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 с семью блоками на панели инструментов. Вот демонстрация в реальном времени .