Arbeitsbereich mit fester Größe

Die einfachste Möglichkeit, Blockly in eine Webseite einzufügen, besteht darin, ihn in ein leeres „div“-Tag einzufügen.

1. Code abrufen

Rufen Sie den Code auf die Weise ab, die für Ihre Anwendung am besten geeignet ist.

2. Bereich definieren

Fügen Sie irgendwo im Body der Seite ein leeres Div-Element hinzu und legen Sie die Größe fest:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. Arbeitsbereich einfügen

Definieren Sie die Struktur der Toolbox:

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 den folgenden Code auf, um Blockly in das definierte div-Element einzufügen.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Die Variable workspace wird derzeit nicht verwendet, ist aber später wichtig, wenn die Blöcke gespeichert oder Code generiert werden soll. Wenn auf derselben Seite mehrere Blockly-Instanzen eingefügt werden, muss jeder zurückgegebene Arbeitsbereich in einer anderen Variablen gespeichert werden.

Jetzt können Sie die Seite in einem Browser testen. Im Blockly-Editor sollte das div-Element mit sieben Blöcken aus der Toolbox gefüllt werden. Hier ist eine Live-Demo.