Codemirror editor is not loading content of the textarea

Question

I'm trying to apply CodeMirror to this mini web app that I'm using. It has two has 2 textareas. I'd like to add CM for better visibility, so I can edit some stuff on the get to go. So far, I managed to apply the Eclipse theme, but the tool doesn't work anymore. It seems like CodeMirror is not copying the content to the textarea.

When I remove the Codemirror js the tool works again.

Here's my 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

It seems to me that the problem is in http://dean.edwards.name/packer/bindings.js, exactly, at the following code:

"#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 uses internal formatting, and applies custom styling to the textareas. So, the direct methods for the textarea, such as input.value won't work. You will need to tweak it so that it uses CodeMirror's methods to get/set the values as described in this guide under Content manipulation methods section.

Edit 1:

Apart from correcting some syntax errors, I got that working in this fiddle.

Changes done:

1. Returned the CodeMirror object from the editor function, so that it can be assigned to a variable.
2. Changed the onclick method. In finally block, there are undefined references to saveScript, and decodeScript, which I commented. And used CodeMirror's getValue(), and setValue() methods to get/set values respectively.

There still are some errors in the console, if observed, but that doesn't hamper the functionality of packer.