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 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 ce qui suit pour injecter Blockly dans votre div défini.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
La variable workspace n'est pas utilisée pour le moment, mais elle deviendra importante plus tard 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 Blockly devrait remplir le div, avec sept blocs dans la boîte à outils. Voici une démonstration en direct.