javascript - 将 Codemirror 编辑器中的更改链接到 HTML 文件中的 p5.js 输出

问题描述

问题陈述

我正在努力了解如何通过单击按钮将 codemirror 编辑器的内容（当它在屏幕上手动更新时）传递给 p5.js 实例。

换句话说，每次按下按钮时如何刷新并生成一个新的 p5.js 实例？

问题详情

我在下面构建了非常基本的代码文件，它是一个简单的 HTML 页面，其中有一个加载的 Codemirror 文件。

每次按下“更新代码”时，它都会将 codemirror 实例的当前内容打印到控制台。但是，我对如何：

          yx = editor.getValue();
          eval(yx);

没有做任何事情 - 理论上它应该输出文件底部已注释的代码段（换句话说，codemirror 实例的当前内容）。此输出应生成 400x400 画布和中间的椭圆。

终极目标 我的终极目标很简单，由两部分组成：

我想为 codemirror 实例的初始内容提供 p5.js 输出
我希望能够通过单击按钮刷新 p5.js 输出，以查看对 codemirror 实例所做的任何更改

代码

请原谅所有格式/缩进（请在 codepen 等中打开）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js"></script>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/dracula.min.css">


<body>
  <font size="1">
    <form>
      <textarea id="jsCode">
      function setup() {
        createCanvas(400, 400);
      }

      function draw() {
        background(220);
        ellipse(200,200,20);
      }
      </textarea>
    </form>
  </font>
</body>

<script id="newx">
        editor = CodeMirror.fromTextArea(document.getElementById('jsCode'), {
            mode: 'javascript', 
            lineNumbers:true,
            theme: 'dracula',
            electricChars: true,
            scrollbarStyle: "null",
        });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>


          <p>Click the button to update</p>

          <button onclick="function2()">Update Code</button>

          <script> 
          function function2() {
          yx = editor.getValue();
          eval(yx);
          console.log(yx);
          };
          </script>

          
          <!-- <script>
              function setup() {
                  createCanvas(400, 400);
                }

              function draw() {
                background(220);
                ellipse(200,200,20);
                }
          </script> -->

标签： javascripthtmlcssp5.jscodemirror

javascript - 将 Codemirror 编辑器中的更改链接到 HTML 文件中的 p5.js 输出

问题描述

解决方案

推荐阅读