Injection
You can inject a Blockly workspace with a call to
Blockly.inject(location, options)
. The first argument tells Blockly where to
inject the workspace in the DOM. The second argument is a dictionary of
name-value pairs that is used for configuration. The injection code parses the
options dictionary into an instance of Blockly.Options
.
Direct creation
You can also create a workspace directly by calling
Blockly.WorkspaceSvg(new Blockly.Options(options))
. Note that you need to
call new Blockly.Options(options)
, passing in your options dictionary--the
workspace constructor expects an instance of Blockly.Options
, not a bare
options dictionary.
The options dictionary
The following options are supported:
Name | Type | Description |
---|---|---|
collapse: |
boolean | Allows blocks to be collapsed or expanded. Defaults to true if the toolbox has categories, false otherwise. |
comments: |
boolean | Allows blocks to have comments. Defaults to true if the toolbox has categories, false otherwise. |
css: |
boolean | If false, don't inject CSS (providing CSS becomes the document's responsibility). Defaults to true . |
disable: |
boolean | Allows blocks to be disabled. Defaults to true if the toolbox has categories, false otherwise. |
grid: |
object | Configures a grid which blocks may snap to. See Grid. |
horizontalLayout : |
boolean | If true toolbox is horizontal, if false toolbox is vertical. Defaults to false . |
maxBlocks: |
number | Maximum number of blocks that may be created. Useful for student exercises. Defaults to Infinity . |
maxInstances: |
object | Map from block types to maximum number of blocks of that type that may be created. Undeclared types default to Infinity . |
media: |
string | Path from page (or frame) to the Blockly media directory. Defaults to "https://blockly-demo.appspot.com/static/media/" . |
move: |
object | Configures behavior for how users can move around the workspace. See Move. |
oneBasedIndex: |
boolean | If true list and string operations should index from 1 , if false index from 0 . Defaults to true . |
readOnly: |
boolean | If true , prevent the user from editing. Suppresses the toolbox and trashcan. Defaults to false . |
rtl: |
boolean | If true , mirror the editor (for Arabic or Hebrew locales). See RTL demo. Defaults to false . |
scrollbars: |
boolean | Sets whether the workspace is scrollable or not. Defaults to true if the toolbox has categories, false otherwise. |
sounds: |
boolean | If false , don't play sounds (e.g. click and delete). Defaults to true . |
theme: |
Blockly.Theme | Defaults to classic theme if no theme is provided. See Themes |
toolbox: |
XML nodes or string | Tree structure of categories and blocks available to the user. See defining the toolbox for more information. |
toolboxPosition: |
string | If "start" toolbox is on top (if horizontal) or left (if vertical and LTR) or right (if vertical and RTL). If "end" toolbox is on opposite side. Defaults to "start" . |
trashcan: |
boolean | Displays or hides the trashcan. Defaults to true if the toolbox has categories, false otherwise. |
maxTrashcanContents: |
number | Maximum number of deleted items that will appear in the trashcan flyout. '0' disables the feature. Defaults to '32'. |
zoom: |
object | Configures zooming behaviour. See Zoom. |
renderer: |
string | Determines the renderer used by blockly. Pre-packaged renderers include 'geras' (the default), 'thrasos', and 'zelos' (a scratch-like renderer). |
plugins: |
object | Map of plugin type to name of registered plugin or plugin class. |