在 html 文件中添加并执行 xml 标签

Question

我在我的 HTML 文件中使用 XML 标签，以便 显示一些块。通过块，我的意思是我想使用块状功能。但不幸的是，我无法在我的视图中显示这些块。我正在使用 Django 框架。关于这个问题，我已经尝试并浪费了超过 2 天的时间。如果有人可以建议一些与 XML 一起工作并块化到 HTML.

的东西，那将会很有帮助

我在下面添加我的代码。

<html>
 <head>
 <meta charset="utf-8">
 <title></title>

 </head>
 <body>

<p>
  <button onclick="showCode()">Show Python</button>
  <button onclick="runCode()" id="runcode">Run Python</button>
  <button onclick="save()" id="save">Save Combination</button>
  <button onclick="restore()" id="restore">Restore</button>
</p>
<div id="blocklyDiv"></div>
<xml id="toolbox">

  <category name="Logic" >
    <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>
    <block type="do_it"></block>
  </category>

  <category name="Loops" >
    <block type="controls_repeat_ext">
      <value name="TIMES">
        <block type="math_number">
          <field name="NUM">10</field>
        </block>
      </value>
    </block>
    <block type="controls_whileUntil"></block>
  </category>

  <category name="Math" >
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="math_single"></block>
  </category>

  <category name="Text" >
    <block type="text"></block>
    <block type="text_length"></block>
    <block type="text_print"></block>
  </category>


</xml>

Answer 1

为 blocklyDiv 元素指定宽度和高度，并添加脚本以将 blockly 注入到 blocklyDiv 元素中。不要忘记包含块源文件。

指南中提到了这些 here。

工作代码-

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <script src="../google/blockly/blockly_compressed.js"></script>
    <script src="../google/blockly/blocks_compressed.js"></script>
    <script src="../google/blockly/msg/js/en.js"></script>
  </head>
  <body>
    <p>
      <button onclick="showCode()">Show Python</button>
      <button onclick="runCode()" id="runcode">Run Python</button>
      <button onclick="save()" id="save">Save Combination</button>
      <button onclick="restore()" id="restore">Restore</button>
    </p>
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
    <xml id="toolbox" style="display: none">
      <category name="Logic">
        <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>
        <block type="do_it"></block>
      </category>

      <category name="Loops">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <block type="math_number">
              <field name="NUM">10</field>
            </block>
          </value>
        </block>
        <block type="controls_whileUntil"></block>
      </category>

      <category name="Math">
        <block type="math_number">
          <field name="NUM">123</field>
        </block>
        <block type="math_arithmetic"></block>
        <block type="math_single"></block>
      </category>

      <category name="Text">
        <block type="text"></block>
        <block type="text_length"></block>
        <block type="text_print"></block>
      </category>
    </xml>

    <script>
      var workspace = Blockly.inject('blocklyDiv', {
        toolbox: document.getElementById('toolbox')
      });
    </script>
  </body>
</html>

在 html 文件中添加并执行 xml 标签

Add and execute xml tag into html file

html

xml

blockly