Il modo più semplice per inserire Blockly in una pagina web è inserirlo in un tag "div" vuoto.
1. Ottieni il codice
Ottieni il codice nel modo più adatto alla tua applicazione.
2. Definisci l'area
Aggiungi un elemento div vuoto in un punto del corpo della pagina e impostane le dimensioni:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Inserisci l'area di lavoro
Definisci la struttura degli strumenti:
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"
},
]
}
Infine, chiama il comando seguente per inserire Blockly nel div definito.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
La variabile workspace non è attualmente utilizzata, ma diventerà importante in seguito, quando si vorrà salvare i blocchi o generare il codice.
Se più di un'istanza di Blockly viene inserita nella stessa pagina, assicurati che ogni area di lavoro restituita sia archiviata in una variabile diversa.
Ora puoi testare la pagina in un browser. Dovresti vedere l'editor di Blockly che riempie il div, con sette blocchi nella casella degli strumenti. Ecco una demo dal vivo.