Le moyen le plus simple d'intégrer Blockly à une page Web consiste à l'injecter dans une balise "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 élément div vide 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 ce qui suit pour injecter Blockly dans la div définie.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
La variable workspace
n'est pas utilisée actuellement, mais elle deviendra importante plus tard si vous souhaitez 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.