固定大小的工作區(qū)
將Blockly放入網(wǎng)頁的最簡單方法是將其注入空的“div”標(biāo)簽。
注入
首先次舌，包括核心Blockly腳本和核心模塊试伙。請注意，路徑可能會有所不同勤哗，具體取決于您的網(wǎng)頁與Blockly文件相關(guān)的位置：
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
然后包含用戶語言的消息（在本例中為英語）：
<script src="msg/js/en.js"></script>
在頁面正文的某處添加一個空div并設(shè)置其大新盏：
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
在頁面的任何位置添加工具箱的結(jié)構(gòu)（請參閱定義工具箱以獲取更多信息）：
<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>
最后，調(diào)用以下命令將Blockly注入空div芒划。此腳本應(yīng)位于頁面底部冬竟，或由onload事件調(diào)用。
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
當(dāng)前未使用工作空間變量民逼，但稍后當(dāng)想要保存塊或生成代碼時(shí)泵殴，它將變得很重要。如果將多個Blockly實(shí)例注入到同一頁面上拼苍，請確保每個返回的工作空間都存儲在不同的變量中笑诅。
在瀏覽器中測試頁面。您應(yīng)該看到Blockly的編輯器填充div疮鲫，工具箱中有七個塊吆你。這是一個現(xiàn)場演示。
