固定大小的工作区
将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，工具箱中有七个块。这是一个现场演示。
