vue中集成blockly的踩坑之旅

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')所以报类似错误的标签，都要一一忽略

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

vue中集成blockly的踩坑之旅相关推荐

vue中微信分享的踩坑之旅
最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...
Swift原生项目中集成RN的踩坑笔记
学习Reate Native的踩坑之路搭建环境官方环境搭建地址.官方原生集成地址本人环境:mac10.15.4.Xcode11.4.brew:2.2.16.Pods:1.9.1.npm:6.14 ...
vue+xterm.js实现webssh踩坑之旅
最近在做的项目需要使用xterminal实现网页远程连接Linux终端,引了这个插件后发现问题很多,接下来一一记录问题所在. 一.如何在vue项目中使用xterm.js 安装xterm.js,博主使用 ...
python 同花顺thstrader_Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)...
代码示例支持平台: Centos 6.3 Python: 2.7.14 1.1 踩坑案例 pid, ppid是大家比较常见的术语, 代表进程号,父进程号. 但pgid是个什么鬼? 了解pgid之前, ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
Vue踩坑之旅（一）—— 数组、对象的监听
作为一个接触 vue 才一个多月的小白,马上就接手基于 vue 的大型商城项目,其间真是跌跌撞撞踩了好多坑(o(╥﹏╥)o).在此写下自己的踩坑之旅,希望给跟我一样还在自学 vue 的同学一些帮助,另 ...
vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
VR制作中必须踩的坑365之037（oculus2、UE4、UE5、VR记录一年的踩坑之旅）Maya / ZBrush / Substance Painter倒来倒去
VR制作中必须踩的坑365之037(oculus2.UE4.UE5.VR记录一年的踩坑之旅)Full 3D GAME ASSET workflow ( Maya / ZBrush / Substanc ...

vue中集成blockly的踩坑之旅

vue中集成blockly的踩坑之旅相关推荐

最新文章

热门文章