Loading file contents into CodeMirror

I’m new to CodeMirror and pretty new with JavaScript too, so thought I’d give myself a bit of a side project to see if I can get to know them better. Basically, I’m aiming to make something similar to a game called Untrusted (http://alexnisnevich.github.io/untrusted/), since I thought this would be a fun thing to try out. I obviously don’t just want to copy their code, because I wouldn’t really learn anything from that. Part of me wishes there was something like a tutorial somewhere about how it’s made.

Here’s where the (most likely simple) questions start. I know that I can write code in the HTML that can be edited when the page loads, but I want to be able to show text from an existing file (so my textarea is initially empty but is populated with whatever is in abc.js etc.). I’m sure this is something that can be done pretty easily but my brain isn’t letting me figure it out.

Also, I have some code to define certain parts that are read only, i.e.:

     var readOnlyLines = [];
     var lowEnd = 0;
     var highEnd = 4;
     while(lowEnd <= highEnd){
        readOnlyLines.push(lowEnd++);
     }

Is there way to have this for each file (obviously they’d all have different lines that can be edited)?

Thanks in advance.

You could use fetch function to load files over HTTP. How you store information about which lines are editable is up to you—you could put it in different files, or include it in the same files.