Stały rozmiar obszaru roboczego

Najprostszym sposobem umieszczenia Blockly na stronie internetowej jest wstawienie go do pustego tagu „div”.

1. Pobierz kod

Pobierz kod w dowolny sposób, który najlepiej pasuje do Twojej aplikacji.

2. Określanie obszaru

Dodaj pusty element div w treści strony i określ jego rozmiar:

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

3. Wstrzykiwanie obszaru roboczego

Określ strukturę skrzynki narzędziowej:

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

Na koniec wywołaj poniższą funkcję, aby wstawić Blockly do zdefiniowanego elementu div.

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

Zmienna workspace nie jest obecnie używana, ale będzie ważna w późniejszym czasie, gdy będziesz chcieć zapisać bloki lub wygenerować kod. Jeśli na tej samej stronie wstrzykiwanych jest więcej niż jedna instancja Blockly, upewnij się, że każdy zwrócony obszar roboczy jest przechowywany w innej zmiennej.

Teraz możesz przetestować stronę w przeglądarce. Powinien wyświetlić się edytor Blockly wypełniający div z 7 blokami w przyborniku. Oto prezentacja na żywo.