Uncaught ReferenceError: CodeMirror 未定义，尽管我已经包含了所有内容。如何美化 textarea 中的 JSON 和 XML

Posted 2023-03-05

【中文标题】Uncaught ReferenceError: CodeMirror 未定义，尽管我已经包含了所有内容。如何美化 textarea 中的 JSON 和 XML

【英文标题】：Uncaught ReferenceError: CodeMirror is not defined although I have included everything. How to beautify the JSON and XML in textarea

【发布时间】：2020-10-05 22:09:28

【问题描述】：

I tried some of the available answers related to the same but none worked hence posting the same

我正在尝试使用 CodeMirror 在 textarea 中格式化我的 JSON 和 XML 代码，因此我下载了 CodemIrror zip 文件并粘贴到我的项目文件夹中。文件夹结构如下所示。

Views
  -codemirror (directory with all the folders related to it including lib)
  -index.html

在我的ìndex.html 中，我已经包含了代码镜像：

    <link rel="stylesheet" type="text/css" href="codemirror/lib/codemirror.css">
    <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="codemirror/mode/clike/clike.js"></script>
    <script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>

我的 Index.html 中的 textarea 也为：

<div class="col-md-8">
   <h5>Test Events in XML :</h5>
   <textarea stryle="height: 400px;" class="form-control" id="xmldata" ng-model="xmldata"></textarea>
</div>

在我的 Javascript 文件中，我只是尝试使用 codemirror 将行号添加到 Textarea，但由于某种原因它失败了：

var editor = CodeMirror.fromTextArea(xmldata, 
    lineNumbers: true
  );

当我运行代码时，我的浏览器控制台出现以下错误：

homeScript.js:115 Uncaught ReferenceError: CodeMirror is not defined
    at homeScript.js:115

如何使用 CodeMirror 美化 Textarea 中存在的 XML 和 JSON 数据

【问题讨论】：

我尝试了更多的东西，但仍然无法让这个东西工作。有人可以回答这个吗？

【参考方案1】：

你确定"xmldata" 是一个元素的句柄吗？ 正确的代码如下所示：

var myTextArea=document.getElementById("xmldata");
CodeMirror.fromTextArea(myTextArea);