Arbeitsbereich mit fester Größe

Die einfachste Möglichkeit, Blockly in eine Webseite einzufügen, besteht darin, es in ein leeres <div>-Tag einzufügen.

1. Code abrufen

Code abrufen – auf die für Ihre Anwendung am besten geeignete Weise.

2. Bereich definieren

Fügen Sie ein leeres div irgendwo im Seiteninhalt ein und legen Sie die Größe fest:

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

3. Arbeitsbereich einfügen

Toolbox-Struktur definieren:

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 schließlich Folgendes auf, um Blockly in Ihr definiertes div einzufügen.

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

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

Jetzt können Sie die Seite in einem Browser testen. Der Blockly-Editor sollte den div ausfüllen und die Toolbox sollte sieben Blöcke enthalten. Hier finden Sie eine Live-Demo.