vue中集成blockly的踩坑之旅

Posted 2022-11-22 六月June June

blockly是一款可视化编辑器。

blockly源码下载地址：https://gitee.com/mirrors/blockly?_from=gitee_search

blockly的文档参考网址：

https://itbilu.com/other/relate/Ek5ePdjdX.html#configure-fixed-size

https://www.npmjs.com/package/blockly

请结合以上文档来看这篇博客

初步搭建blockly：

npm install blockly 如果安装失败，请删除node_modules重新安装

在.vue单文件的script中 引入

// 引入Blockly
import Blockly from'blockly'
// 引入想要转换的语言，语言有php python dart lua javascript
import 'blockly/javascript'
// 引入语言包并使用
import * as hans from 'blockly/msg/zh-hans'
Blockly.setLocale(hans);
//引入媒体文件：我是在github上下载的blockly源码，将源码中的media文件放入我项目中的public文件夹下

//忽略被vue错认为组件的blockly中的标签，不止以下这些，请发现一个忽略一个
import Vue from'vue'
Vue.config.ignoredElements.push('xml')
Vue.config.ignoredElements.push('block')
Vue.config.ignoredElements.push('field')
Vue.config.ignoredElements.push('category')
Vue.config.ignoredElements.push('sep')
Vue.config.ignoredElements.push('value')
Vue.config.ignoredElements.push('statement')
Vue.config.ignoredElements.push('mutation')

在.vue单文件的template中确定引入位置并添加工具栏

<!-- blockly工作区 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- blockly工具栏 -->
</xml id="toolbox" style="display: none">
  <category name="逻辑" colour="%BKY_LOGIC_HUE">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
  </category>
  <sep></sep>
  <category name="数学" colour="%BKY_MATH_HUE">
    <block type="math_number">
        <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="math_single"></block>
  </category>
</xml>
<!-- blockly代码区 -->
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

在.vue单文件的script中创建blockly工作区

this.workspace = Blockly.inject('blocklyDiv',
  
    //工具栏
    toolbox: document.getElementById('toolbox'),
    //网格效果
    grid:spacing: 20,length: 3,colour: '#ccc',snap: true,
    //媒体资源
    media: './media/',
    //垃圾桶
    trashcan: true
  
);
//工作区监听代码生成器
this.workspace.addChangeListener(this.myUpdateFunction);

methods:
    // 代码生成器
    myUpdateFunction(event)
        var code = Blockly.JavaScript.workspaceToCode(this.workspace);
        document.getElementById('textarea').value = code;
    ,
    // 获取blockly工作区中的code和xml结构
    getBlockData()
      const code = Blockly.JavaScript.workspaceToCode(this.workspace);
      const xml = Blockly.Xml.workspaceToDom(this.workspace)
      const xmlText = Blockly.Xml.domToText(xml);
    ,
    // 回显工作区中的xml结构
    setBlockData(xmlText)
      this.clearBlockData();
      const xml = Blockly.Xml.textToDom(xmlText);
      Blockly.Xml.domToWorkspace(xml, this.workspace);
    ,
    // 清空工作区
    clearBlockData()
      this.workspace.clear();
    ,

报错：[Vue warn]: Unknown custom element: <xml> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

原因：vue将xml标签错认为组件

解决：①引入v-blockly ②Vue.config.ignoredElements.push('xml')所以报类似错误的标签，都要一一忽略

如其他相关问题欢迎提问，乐意为你解答。