Najprostszym sposobem umieszczenia Blockly na stronie internetowej jest wstawienie jej w pustym tagu „div”.
1. Pobierz kod
Pobierz kod w sposób, który najlepiej odpowiada Twojej aplikacji.
2. Zdefiniuj obszar
Dodaj pusty element div w treści strony i ustaw jego rozmiar:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Wstrzyknij obszar roboczy
Zdefiniuj strukturę zestawu 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ższy kod, aby wstrzyknąć Blockly do zdefiniowanego elementu div.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
Obecnie zmienna workspace
nie jest używana, ale stanie się ważna później, gdy trzeba będzie zapisać bloki lub wygenerować kod.
Jeśli na tej samej stronie znajduje się więcej niż 1 instancja Blockly, upewnij się, że każdy zwrócony obszar roboczy jest przechowywany w innej zmiennej.
Teraz możesz przetestować stronę w przeglądarce. Edytor Blockly powinien wypełnić element div, a w zestawie narzędzi jest 7 bloków. Oto prezentacja na żywo.