入門
本文檔面向希望創(chuàng)建將Blockly作為代碼編輯器的應(yīng)用程序的開發(fā)人員。這里假設(shè)用戶已經(jīng)熟悉Blockly的用法，并且人們對(duì)HTML和JavaScript有基本的了解。
總覽
Blockly旨在輕松安裝程序到您的Web應(yīng)用程序中。首先由用戶拖動(dòng)塊，然后由Blockly生成代碼，最后在您的應(yīng)用程序使用該代碼執(zhí)行某些操作。從您的應(yīng)用程序的角度來看，Blockly只是一個(gè)文本區(qū)域，用戶可以在其中鍵入語法上完美的JavaScript，Python，PHP，Lua，Dart或其他語言。
獲取源代碼
首先，從GitHub下載源代碼。如果您知道如何使用Git或Subversion，我們強(qiáng)烈建議您從我們的存儲(chǔ)庫(kù)進(jìn)行同步，以便您的代碼保持最新。
獲得代碼后，使用瀏覽器訪問 demos/fixed/index.html并驗(yàn)證是否可以拖動(dòng)塊。
在頁(yè)面中注入Blockly
驗(yàn)證Blockly安裝無誤后，使用固定大小的div將Blockly注入網(wǎng)頁(yè)中。詳見下一章《固定工作區(qū)域》
更高級(jí)的網(wǎng)頁(yè)可能希望允許Blockly調(diào)整大小以填充頁(yè)面。詳見下一章《調(diào)整工作區(qū)域》
組件
前述示例中使用的Blockly.inject行包含“名稱-值”對(duì)作為第二個(gè)參數(shù)，這些參數(shù)可用于配置。支持一下選項(xiàng)：
| 名稱 | 類型 | 描述 |
|---|---|---|
| collapse | 布爾型 | 允許折疊或展開塊。如果工具箱具有類別，則默認(rèn)為true，否則為false。 |
| comments | 布爾型 | 允許塊有注釋。如果工具箱具有類別，則默認(rèn)為true，否則為false。 |
| css | 布爾型 | 如果為false，請(qǐng)不要注入CSS（提供CSS成為文檔的責(zé)任）。默認(rèn)為true。 |
| disable | 布爾型 | 允許禁用塊。如果工具箱具有類別，則默認(rèn)為true，否則為false。 |
| grid | 對(duì)象 | 配置可以捕捉到塊的網(wǎng)格。詳見《網(wǎng)格》...... |
| horizontalLayout | 布爾型 | 如果true工具箱是水平的，如果false則工具箱是垂直的。默認(rèn)為false。 |
| maxBlocks | 數(shù)值型 | 可以創(chuàng)建的最大塊數(shù)。對(duì)學(xué)生練習(xí)很有用。默認(rèn)為無限。 |
| maxInstances | 對(duì)象 | 從塊類型映射到可以創(chuàng)建的該類型的最大塊數(shù)。未聲明的類型默認(rèn)為Infinity。 |
| media | 字符串 | 從頁(yè)面（或框架）到Blockly媒體目錄的路徑，默認(rèn)是“https://blockly-demo.appspot.com/static/media/” |
| move | 對(duì)象 | 配置用戶如何在工作區(qū)中移動(dòng)的行為。詳見《移動(dòng)》 |
| oneBasedIndex | 布爾型 | 如果true則列表和字符串操作應(yīng)該從1開始索引，如果false索引從0開始。默認(rèn)為true。 |
| readOnly | 布爾型 | 如果為true，則阻止用戶編輯。隱藏工具箱和垃圾桶。默認(rèn)為false。 |
| rtl | 布爾型 | 如果為true，則鏡像編輯器（對(duì)于阿拉伯語或希伯來語語言環(huán)境）。請(qǐng)參閱RTL演示。默認(rèn)為false。 |
| scrollbars | 布爾型 | 設(shè)置工作空間是否可滾動(dòng)。如果工具箱具有類別，則默認(rèn)為true，否則為false。 |
| sounds | 布爾型 | 如果為false，則不播放聲音（例如，單擊和刪除）。默認(rèn)為true。 |
| theme | Blockly.Theme | 如果未提供主題，則默認(rèn)為經(jīng)典主題。 詳見《主題》 |
| toolbox | XML nodes 或 字符串 | 用戶可用的類別和塊的樹結(jié)構(gòu)。請(qǐng)參閱下面的詳細(xì)信息。 |
| toolboxPosition | 字符串 | 如果“start”工具箱位于頂部（如果是水平）或左側(cè)（如果是垂直和LTR）或右側(cè)（如果是垂直和RTL）。如果“end”工具箱位于對(duì)面。默認(rèn)為“start”。 |
| trashcan | 布爾型 | 顯示或隱藏垃圾桶。如果工具箱具有類別，則默認(rèn)為true，否則為false。 |
| maxTrashcanContents | 數(shù)值型 | 將顯示在垃圾箱彈出窗口中的最大已刪除項(xiàng)目數(shù)。 '0'禁用該功能。默認(rèn)為'32'。 |
| zoom | 對(duì)象 | 配置縮放行為。詳見《縮放》... |
最重要的選項(xiàng)是工具箱。這是一個(gè)XML樹，它指定工具箱中可用的塊（側(cè)邊菜單）、它們的分組方式以及是否有類別。詳見《定義toolbox》。
除了Blockly附帶的默認(rèn)塊之外，還需要構(gòu)建自定義塊來調(diào)用Web應(yīng)用程序的API。一個(gè)例子是迷宮游戲，它有自定義的移動(dòng)塊。詳見《創(chuàng)建自定義塊》。
代碼生成器
Blockly不是一種編程語言，不能“運(yùn)行”一個(gè)Blockly程序。相反，Blockly可以將用戶的程序轉(zhuǎn)換為JavaScript，Python，PHP，Dart或其他語言。詳見《代碼生成器》。
導(dǎo)入和導(dǎo)出塊
如果您的應(yīng)用程序需要保存并存儲(chǔ)用戶的塊并在以后訪問時(shí)恢復(fù)它們，請(qǐng)使用此調(diào)用導(dǎo)出到XML：
var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);
這將生成一個(gè)包含用戶塊的XML的最?。ǖ茈y看）的字符串。如果希望獲得更可讀（但更大）的字符串，請(qǐng)改用Blockly.Xml.domToPrettyText。
從XML字符串恢復(fù)到塊也很簡(jiǎn)單：
var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);
云存儲(chǔ)
Blockly附帶可選的云存儲(chǔ)功能。它使用戶能夠保存，加載，共享和發(fā)布他們的程序。如果您的項(xiàng)目托管在App Engine上，則可以利用此服務(wù)。詳見《云存儲(chǔ)》。
