项目地址 https://github.com/google/blockly
开发者网站 https://developers.google.com/blockly
web指南 https://developers.google.com/blockly/guides/get-started/web
入门参考 https://blocklycodelabs.dev/codelabs/getting-started/index.html
常用 API https://developers.google.com/blockly/reference/js?hl=en

使用

在您的应用程序代码中，您可以使用以下命令加载 Blockly：

<script src="blockly_compressed.js"></script>

定义工作区

将 Blockly 放入网页的最简单方法是将其注入一个空的“div”标签。
首先，包括核心 Blockly 脚本和核心块集。请注意，路径可能会有所不同，具体取决于您的页面相对于 Blockly 的位置：

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>

然后包含用户语言的消息（在本例中为英语）：

<script src="msg/js/en.js"></script>

可调整大小的工作区

<div id="blocklyDiv" style="position: absolute"></div>

在页面的任意位置添加工具箱的结构：

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>

此脚本应位于页面底部，或由 onload 事件调用。
<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

该workspace变量当前未使用，但在以后想要保存块或生成代码时会变得很重要。如果在同一页面上注入了多个 Blockly 实例，请确保每个返回的工作区都存储在不同的变量中。

可调整大小的工作区的脚本

<script>
  var blocklyArea = document.getElementById('blocklyArea');
  var blocklyDiv = document.getElementById('blocklyDiv');
  var workspace = Blockly.inject(blocklyDiv,
      {toolbox: document.getElementById('toolbox')});
  var onresize = function(e) {
    // Compute the absolute coordinates and dimensions of blocklyArea.
    var element = blocklyArea;
    var x = 0;
    var y = 0;
    do {
      x += element.offsetLeft;
      y += element.offsetTop;
      element = element.offsetParent;
    } while (element);
    // Position blocklyDiv over blocklyArea.
    blocklyDiv.style.left = x + 'px';
    blocklyDiv.style.top = y + 'px';
    blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
    blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
    Blockly.svgResize(workspace);
  };
  window.addEventListener('resize', onresize, false);
  onresize();
  Blockly.svgResize(workspace);
</script>

块导入导出

如果您的应用程序需要保存和存储用户的块并在以后访问时恢复它们，请使用此调用导出到 XML：

var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);

这将生成一个包含用户块的 XML 的最小（但丑陋）的字符串。如果希望获得更易读（但更大）的字符串，请 Blockly.Xml.domToPrettyText改用。

从 XML 字符串恢复到块同样简单：

var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);