Die einfachste Möglichkeit, Blockly in eine Webseite einzufügen, ist das Einfügen in ein leeres "div"-Tag.
1. Code abrufen
Rufen Sie den Code so ab, wie es für Ihre Anwendung am besten ist.
2. Bereich definieren
Fügen Sie an einer beliebigen Stelle im Text der Seite ein leeres div-Element ein und legen Sie seine Größe fest:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Arbeitsbereich einfügen
Definieren Sie die Toolbox-Struktur:
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"
},
]
}
Rufen Sie abschließend Folgendes auf, um Blockly in Ihr definiertes div-Element einzufügen.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
Die Variable workspace wird derzeit nicht verwendet. Sie wird jedoch später wichtig, wenn die Blöcke gespeichert oder Code generiert werden sollen.
Wenn mehr als eine Instanz von Blockly auf derselben Seite injiziert wird, achten Sie darauf, dass jeder zurückgegebene Arbeitsbereich in einer anderen Variablen gespeichert wird.
Jetzt können Sie die Seite in einem Browser testen. Im Editor von Blockly sollte das div-Element mit sieben Blöcken in der Toolbox gefüllt sein. Hier finden Sie eine Live-Demo.