Le moyen le plus simple d'insérer Blockly dans une page Web consiste à l'injecter dans un tag "div" vide.
1. Obtenir le code
Obtenez le code de la manière qui convient le mieux à votre application.
2. Définir la zone
Ajoutez un tag div vide quelque part dans le corps de la page et définissez sa taille:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Injecter l'espace de travail
Définissez la structure de la boîte à outils:
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"
},
]
}
Enfin, appelez la commande suivante pour injecter Blockly dans l'élément div défini.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
La variable workspace n'est pas utilisée actuellement, mais elle deviendra importante par la suite lorsque vous voudrez enregistrer les blocs ou générer du code.
Si plusieurs instances de Blockly sont injectées sur la même page, assurez-vous que chaque espace de travail renvoyé est stocké dans une variable différente.
Vous pouvez maintenant tester la page dans un navigateur. L'éditeur de Blockly devrait remplir l'élément div avec sept blocs dans la boîte à outils. Voici une démonstration en direct.