上一篇已经成功的添加了工具箱，虽然还有很多地方没弄明白，但是至少是添加上了，终于可以将块拖出来进行操作了。

拖来拖去，久了也没啥意思了。所以本文将开始让放入工作区的块编程代码

准备工作

先给网页添加一个按钮吧，不然从哪里开始触发它生成代码

    <table>
        <tr>
            <td>
                <!-- 添加一个按钮，暂且名叫运行 -->
                <button id="runButton" type="button" title="Run the program define by the blocks in the workspace">
                    运行
                </button>
            </td>
        </tr>
        <tr>
            <td id="blocklyArea">
                Blockly 最后会放在这里
            </td>
        </tr>
    </table>

生成代码

blockly支持JavaScript、Python、PHP、Lua、Dart这几个代码生成器，其它的可以自己导入。

使用哪个代码生成器就导入对应的模块，这里选用python，对应的模块是
<script src="./node_modules/blockly/python_compressed.js"></script>。

生成代码的方法也很简单，一句话const pythonCode = Blockly.Python.workspaceToCode(workspace);

要实现点击按钮生成代码，在按钮的单击事件里调用生成方法即可，这里偷个懒，生成的代码通过log输出，没有显示到页面上

        function runcode() {
            const pythonCode = Blockly.Python.workspaceToCode(workspace);
            console.log(pythonCode);
        }
        const btn = document.querySelector("button");
        btn.addEventListener("click", runcode);

非常省心省力

实时生成代码

生成代码的速度非常的快，因此如果有需要的可以实时生成代码：当工作区的内容改变，就生成代码

# 定义工作区改变事件处理函数，生成代码并输出到编辑框上
function updateCode(event) {
  const pythonCode = Blockly.Python.workspaceToCode(workspace);
  document.getElementById('textarea').value = pythonCode;
}
# 将这个函数注册给工作区改变事件监听器
workspace.addChangeListener(updateCode);