Codemirror 编辑器未加载文本区域的内容

Question

我正在尝试将 CodeMirror 应用到我正在使用的这个迷你网络应用程序。它有两个有 2 个文本区域。我想添加 CM 以获得更好的可见性，这样我就可以随时编辑一些东西。到目前为止，我设法应用了 Eclipse 主题，但该工具不再起作用。似乎 CodeMirror 没有将内容复制到文本区域。

当我删除 Codemirror js 时，该工具再次运行。

这是我的 JSFiddle

HTML

<textarea id="input" rows="10" cols="80"></textarea>
<textarea id="output" rows="10" cols="80" readonly></textarea>

JS

$('textarea').each(function(index, elem) {
  CodeMirror.fromTextArea(elem, {
    lineWrapping: true,
    mode: "javascript",
    theme: "eclipse",
    lineNumbers: true,

  });

});

Answer 1

在我看来，问题出在http://dean.edwards.name/packer/bindings.js，确切地说，在以下代码处：

"#pack-script": {
    disabled: false,

    onclick: function() {
        try {
            output.value = "";
            if (input.value) {
                var value = packer.pack(input.value, base62.checked, shrink.checked);
                output.value = value;
                message.update();
            }
        } catch (error) {
            message.error("error packing script", error);
        } finally {
            saveScript.disabled = !output.value;
            decodeScript.disabled = !output.value || !base62.checked;
        }
    }
},

CodeMirror 使用内部格式，并将自定义样式应用于文本区域。因此，textarea 的直接方法，例如 input.value 将不起作用。您需要调整它，以便它使用 CodeMirror 的方法 get/set 内容操作方法 部分下的 this guide 中描述的值。

编辑 1：

除了纠正一些语法错误外，我在 this fiddle.

中得到了它的工作

完成的更改：

从 editor 函数返回了 CodeMirror 对象，以便可以将其分配给变量。
更改了 onclick 方法。在 finally 块中，有对 saveScript 和 decodeScript 的未定义引用，我对此进行了评论。并分别使用 CodeMirror 的 getValue() 和 setValue() 方法来 get/set 值。

如果观察到，控制台中仍然存在一些错误，但这不会影响打包程序的功能。

Codemirror 编辑器未加载文本区域的内容

Codemirror editor is not loading content of the textarea

javascript

jquery

codemirror