问题描述
我想分块进行自定义，但按照在线来源的说明进行操作后，我在浏览器中看不到任何内容。
这是示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blockly test</title>
<!-- core library -->
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
</head>
<body>
<div id="editor"></div>
<xml id="toolBox">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
Blockly.Blocks['constant_value'] = {
init: function () {
this.appendValueInput('VALUE')
.setCheck('String')
.appendField('TEST');
this.setoutput(true,'Number');
this.setColour(160);
this.setTooltip('Returns number of letters in the provided text.');
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
}
}
var workspacePlayground = Blockly.inject('editor',{ toolBox: document.getElementById('toolBox') });
</script>
</body>
</html>如何让 Blockly 编辑器显示出来？
解决方法
您的 Blockly 工作区看起来不错。问题是缺少 CSS 来为编辑器提供高度和宽度以使其可见：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Blockly test</title>
<!-- core library -->
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<!-- add CSS to give the editor dimensions -->
<style>
#editor {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="editor"></div>
<xml id="toolbox">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script>
Blockly.Blocks['constant_value'] = {
init: function () {
this.appendValueInput('VALUE')
.setCheck('String')
.appendField('TEST');
this.setOutput(true,'Number');
this.setColour(160);
this.setTooltip('Returns number of letters in the provided text.');
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
}
}
var workspacePlayground = Blockly.inject('editor',{ toolbox: document.getElementById('toolbox') });
</script>
</body>
</html>我添加的是：
<style>
#editor {
width: 100%;
height: 500px;
}
</style>