I'd like to use CodeMirror for two pages on my website. The first is a Code snippet uploading page, the second is a page to view code snippets. On the second page I'd like to make CodeMirror ReadOnly, obviously to not allow users to change its content.
So, the first page (the upload page) works flawlessly, it displays the plugin like it should, and works like it should.
Here's an image of it:
Here's its javascript: (it's an external script file)
var UploadPageCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeSnippetBody'), { mode: "javascript", theme: "default", lineNumbers: true });
HTML:
<textarea rows="15" cols="70" name="CodeSnippetBody" id="CodeSnippetBody" @Validation.For("CodeSnippetBody")></textarea>
The problem only persist on the second page, where the user can view uploaded snippets. For some reason it won't work with a different textarea ID, though I referenced it right. If I change the ID of this textarea to the one on the upload page (CodeSnippetBody) for some reason it works, but I can't change attributes of it.
Here is the js: (the same external script file)
var ReadOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeSnippetBodyReadOnly'), { mode: "javascript", theme: "default", lineNumbers: true });
And here's the HTML:
<textarea id="CodeSnippetBodyReadOnly">@code["CodeSnippetBody"]</textarea>
It displays like this:
As you can see the plugin won't initalize
If I change the ID of this textarea to CodeSnippetBody, so it matches the upload page's id it works:
<textarea id="CodeSnippetBody">@code["CodeSnippetBody"]</textarea>
Displays like this:
The problem with this, as I stated before, is that I can't change its attribute to ReadOnly.
What am I doing wrong?
I hope I gave you enough info, if you need more, please ask, I will provide. Thank you!