I have been messing with this for the last day and I am out of ideas. If I do a reload on the page, the file comes through fine in code mirror, however on load, it will only show the default text in my text area. I am implementing a file “swapper” I change the url to reflect which file I am in for other parts of my application and would prefer to not have to rely on a page refresh.
The first file loaded always works fine, however when I switch I see nothing but the text in my html text area, even though when I run a getValue() on my code mirror, it is correct.
// Load code - called on page load, and when I load new file
vm.loadCode = function (data) {
vm.myCodeMirror.setValue(data);
vm.refreshCodeView();
}
// Refresh
vm.refreshCodeView = function () {
$timeout(function () {
vm.myCodeMirror.refresh();
console.log(vm.myCodeMirror.getValue()); //this shows the correct data
}, 100);
}
Here is my options if that has anything to do with it…
// My Code Mirror
vm.mode = getMode();
var codeMirrorOptions = {
mode: vm.mode,
lineNumbers: true,
lineWrapping: true,
theme: 'default',
autoFocus: true,
foldGutter: true,
json: (vm.mode == "application/json"),
lint: (vm.mode == "application/json"),
extraKeys: {
"Ctrl-Q": function(cm)
{
cm.foldCode(cm.getCursor());
}
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"]
};
vm.myCodeMirror = CodeMirror.fromTextArea(document.getElementById('html-code-view'), codeMirrorOptions);
vm.myCodeMirror.setSize("100%", "100%");
My text area
<div id="html-codeview-content" class="row">
<p>
<textarea style="overflow: scroll" id="html-code-view" >
Will be replaced by file contents...
</textarea>
</p>
</div>