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 forma que funcione mejor para tu aplicación.
2. Define el área
Agrega un elemento div vacío en alguna parte del cuerpo de la página y establece el tamaño:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Cómo insertar el lugar 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 div definido.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
Actualmente, no se usa la variable workspace, pero será importante más adelante cuando se quiera 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 div, con siete bloques en la caja de herramientas. Esta es una demostración en vivo.