Question

将Blockly放入网页的最简单方法是将其注入空的“div”标签。

注入

首先，包括核心Blockly脚本和核心模块。请注意，路径可能会有所不同，具体取决于您的网页与Blockly文件相关的位置：

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

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

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

在页面正文的某处添加一个空div并设置其大小：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></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>

最后，调用以下命令将Blockly注入空div。此脚本应位于页面底部，或由onload事件调用。

<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

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

在浏览器中测试页面。您应该看到Blockly的编辑器填充div，工具箱中有七个块。这是一个现场演示。