blockly 代码html,Blockly 代码生成

Blockly 官方支持生成多种代码， javascript、python、lua等，

这样子，初学者就可以通过拖拽积木实现编程功能

参考

因为是个样式小渣渣，直接引入了UI库

layui、jquery

还是老样子，

引入编译好的blockly文件和必须的文件

监听积木块的变化并生成对应的代码

function myUpdateFunction(event) {

var code = Blockly.JavaScript.workspaceToCode(workspace);

document.getElementById('textarea').value = code;

}

var blocklyDiv = document.getElementById('blocklyDiv');

var workspace = Blockly.inject(blocklyDiv,

{ toolbox: document.getElementById('toolbox') });

workspace.addChangeListener(myUpdateFunction);

image.png

image.png

优化

可以给代码部分嵌入在线编辑器ACE，或者其他组件样式化代码