Blockly安裝后是不能直接使用的溯革，需要借助其它應(yīng)用才能使用颇蜡，官方叫注入。
本文通過注入網(wǎng)頁的形式來開始探索blockly馅精。
準(zhǔn)備工作
先準(zhǔn)備一個最簡單的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
</head>
<body>
還沒放內(nèi)容
</body>
</html>
固定尺寸的工作區(qū)
如下面的代碼所示次慢，只需要3個步驟旁涤，即可完成注入，是注入網(wǎng)頁的最簡單方法了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<!-- STEP1: 包含核心 Blockly 腳本和核心模塊 -->
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
</head>
<body>
<!-- STEP2: 在頁面正文的某處添加一個空 div 并設(shè)置其大小 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- STEP3: 調(diào)用以下命令將 Blockly 注入空div经备。此腳本應(yīng)位于頁面底部拭抬，或由 onload 事件調(diào)用 -->
<script>
var workspace = Blockly.inject(document.getElementById('blocklyDiv'), {});
</script>
</body>
</html>
可調(diào)整尺寸的工作區(qū)
通過前面的操作傅蹂，得到了一個注入成功的工作區(qū)纷闺。很簡單对途，但是尺寸是固定的昔期，實際應(yīng)用中沒啥意義。所以還是得實現(xiàn)尺寸可以調(diào)整的尸执』榉颍總共有3個過程：
定義區(qū)域
使用 HTML 表格或帶有 CSS 的 div浸卦，創(chuàng)建一個在頁面調(diào)整大小時會重排的空白區(qū)域，這里叫blocklyArea案糙。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<style>
html,
body {
height: 100%;
margin: 0%;
}
</style>
</head>
<body>
<table style="height: 100%; width: 100%">
<tr>
<td id="blocklyArea" style="height: 99%; background: #fc9;">
Blockly 最后會放在這里
</td>
</tr>
</table>
</body>
</html>
注入Blockly
這一步跟上一小節(jié)《固定尺寸的工作區(qū)》一樣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<!-- STEP1: 包含核心 Blockly 腳本和核心模塊 -->
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
<style>
html,
body {
height: 100%;
margin: 0%;
}
</style>
</head>
<body>
<!-- STEP2: 在頁面正文的某處添加一個空 div 并設(shè)置其大小 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- STEP1: 定義一個區(qū)域 -->
<table style="height: 100%; width: 100%">
<tr>
<td id="blocklyArea" style="height: 99%; background: #fc9;">
Blockly 最后會放在這里
</td>
</tr>
</table>
<!-- STEP3: 調(diào)用以下命令將 Blockly 注入空div靴庆。此腳本應(yīng)位于頁面底部，或由 onload 事件調(diào)用 -->
<script>
var workspace = Blockly.inject(document.getElementById('blocklyDiv'), {});
</script>
</body>
</html>
定位
最后一步是將 blocklyDiv 元素放在 blocklyArea 元素上怒医。
首先炉抒，將上一個過程 blocklyDiv 元素中的style樣式全部刪除，然后添加絕對定位：
<div id="blocklyDiv" style="position: absolute"></div>
其次稚叹，修改注入腳本焰薄，為將 'blocklyDiv' 置于 'blocklyArea' 上，可以直接用下面的腳本替換
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
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>
