La manera más sencilla de colocar Blockly en una página web es insertarlo en una etiqueta "div" vacía.
1. Obtén el código
Obtén el código de la manera que mejor funcione para tu aplicación.
2. Define el área
Agrega un elemento div vacío en alguna parte del cuerpo de la página y configura su tamaño:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Cómo insertar el espacio de trabajo
Define la estructura de la caja de herramientas:
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"
},
]
}
Por último, llama a lo siguiente para insertar Blockly en el elemento div definido.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
La variable workspace no se usa actualmente, pero será importante más adelante cuando se quieran guardar los bloques o generar código.
Si se inserta más de una instancia de Blockly en la misma página, asegúrate de que cada lugar de trabajo que se muestra se almacene en una variable diferente.
Ahora puedes probar la página en un navegador. Deberías ver el editor de Blockly completando el elemento div, con siete bloques en la caja de herramientas. Esta es una demostración en vivo.