La forma 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 se adapte a tu aplicación.
2. Cómo definir el área
Agrega un div vacío en algún lugar del cuerpo de la página y establece su tamaño:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Cómo inyectar 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 al siguiente código para insertar Blockly en tu 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 inyecta más de una instancia de Blockly en la misma página, asegúrate de que cada espacio de trabajo devuelto se almacene en una variable diferente.
Ahora puedes probar la página en un navegador. Deberías ver que el editor de Blockly llena el div, con siete bloques en la caja de herramientas. Aquí tienes una demostración en vivo.