Reputation: 578
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,
});
});
Upvotes: 4
Views: 1694
Reputation: 23869
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:
editor
function, so that it can be assigned to a variable.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.
Upvotes: 1