更新事件后添加多个文本区域

Question

我正在使用 codemirror 制作一个简单的代码编辑器。我正处于最后阶段，但出现了一个错误，我无法理解。

我有一个 select html 标签，其中包含三个选项：

<select class="language" id="lang" onclick="update()">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="python">C</option>
</select>

我的 update() 函数是：

function update() {
  var select = $('#lang').val();
  var editor = CodeMirror.fromTextArea($('#text'), {
      mode: select,
      theme: "blackboard",
      });
}
update();

现在发生的情况是，每次我 select 从下拉列表中选择不同的选项时，都会在前一个代码编辑器下方添加一个新的代码编辑器。

您是否知道我的代码哪里出了问题以及我该如何解决？

Answer 1

将您的 JS 更改为：

let editor;
function update() {
  var select = $('#lang').val();
  editor = editor ?? CodeMirror.fromTextArea($('#text'), {
      theme: "blackboard",
  });
  editor.setOption('mode', select);
}
update();

这使得如果 editor 已经存在，则不会再次创建它，而是 re-used.

更新事件后添加多个文本区域

Multiple text-areas being added after an update event

html

javascript

codemirror