Obszar roboczy o stałym rozmiarze

Najprostszym sposobem umieszczenia Blockly na stronie internetowej jest wstrzykiwanie jej do pustego tagu „div”.

1. Pobierz kod

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

2. Określ obszar

Dodaj pusty element div gdzieś w ciele strony i ustaw jego rozmiar:

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

3. Wstawianie obszaru roboczego

Zdefiniuj strukturę panelu narzędzi:

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 wstrzyknąć Blockly do zdefiniowanego elementu div.

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

Zmienna workspace nie jest obecnie używana, ale stanie się ważna później, gdy zechcemy zapisać bloki lub wygenerować kod. Jeśli na tej samej stronie jest wstrzykiwane więcej niż 1 wystąpieni Blockly, upewnij się, że każdy zwrócony obszar roboczy jest przechowywany w innej zmiennej.

Możesz teraz przetestować stronę w przeglądarce. Edytor Blockly powinien wypełniać element div, dodając do niego 7 bloków. Oto demonstracja na żywo.