A maneira mais simples de colocar o Blockly em uma página da Web é injetá-lo em uma tag "div" vazia.
1. Acessar o código
Consiga o código da maneira que melhorar para seu aplicativo.
2. Definir a área
Adicione um div vazio em algum lugar no corpo da página e defina o tamanho dela:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Injetar o espaço de trabalho
Defina a estrutura da caixa de ferramentas:
const toolbox = {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "controls_repeat_ext"
},
{
"kind": "block",
"type": "logic_compare"
},
{
"kind": "block",
"type": "math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "text"
},
{
"kind": "block",
"type": "text_print"
},
]
}
Por fim, chame o comando a seguir para injetar o Blockly no div definido.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
A variável workspace não é usada atualmente, mas vai se tornar importante mais tarde, quando alguém quiser salvar os blocos ou gerar código.
Se mais de uma instância do Blockly for injetada na mesma página, verifique
se cada espaço de trabalho retornado está armazenado em uma variável diferente.
Agora você pode testar a página em um navegador. Você verá o editor do Blockly preenchendo o div, com sete blocos na caixa de ferramentas. Confira uma demonstração ao vivo.