Codemirror不适用于不同的Id

Question

我想在我的网站上将CodeMirror用于两个页面。第一个是代码段上传页面，第二个是查看代码段的页面。在第二页，我想制作CodeMirror ReadOnly，显然不允许用户更改其内容。

因此，第一页（上传页面）完美无瑕地运行，它会显示插件，应该像它应该的那样工作。
以下是它的图片：

以下是javascript :(它是一个外部脚本文件）

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>

问题仅存在于第二页，用户可以在其中查看上传的代码段。出于某种原因，它不会使用不同的textarea ID，尽管我引用了它。如果我将此textarea的ID更改为上传页面上的ID（CodeSnippetBody），由于某种原因它可以正常工作，但我无法更改它的属性。

这是js :(相同的外部脚本文件）

var ReadOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeSnippetBodyReadOnly'), {        mode: "javascript",        theme: "default",        lineNumbers: true    });

以下是HTML：

<textarea id="CodeSnippetBodyReadOnly">@code["CodeSnippetBody"]</textarea>

显示如下：

正如您所看到的那样，该插件无法实现

如果我将此textarea的ID更改为CodeSnippetBody，那么它与上传页面的ID相匹配：

<textarea id="CodeSnippetBody">@code["CodeSnippetBody"]</textarea>

显示如下：

正如我之前所说，问题在于我无法将其属性更改为ReadOnly。

我做错了什么？

我希望我给你足够的信息，如果你需要更多，请问，我会提供。谢谢！