本教程详细讲解了在网页中正确初始化多个CodeMirror文本编辑器的关键方法。针对常见的循环中重复选取第一个元素的错误，本文提供了正确的JavaScript代码示例，确保每个目标textarea都能独立、正确地被CodeMirror实例化，从而避免内容仅显示在首个编辑器的问题。

引言

codemirror是一款功能强大的浏览器内代码编辑器，广泛应用于在线代码编辑、代码展示等场景。在开发过程中，我们经常需要在同一个页面中集成多个codemirror实例，例如展示多个代码片段或提供多个独立的编辑区域。然而，如果不注意初始化逻辑，可能会遇到只有第一个codemirror实例被正确渲染，而其他实例无法显示的问题。本教程将深入分析这一常见问题，并提供一套正确的初始化方案。

常见错误与问题分析

当我们需要为页面中所有带有特定CSS类（例如.codemirror-textarea）的textarea元素初始化CodeMirror时，通常会使用document.querySelectorAll()来获取这些元素，并通过forEach循环进行遍历。一个常见的错误模式是在循环内部再次尝试获取所有元素，并错误地从中选取第一个元素进行初始化。

考虑以下这段存在逻辑问题的代码示例：

// 错误示例：此代码仅会初始化第一个CodeMirror实例 window.onload = function() {     document.querySelectorAll(".codemirror-textarea").forEach(el => {         // 错误：这里的 [output] 总是会重新获取到 NodeList 中的第一个元素         // 无论当前循环到哪个 el，CodeMirror 都会被应用到第一个匹配的 textarea 上         const [output] = document.querySelectorAll(".codemirror-textarea");         const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});     }); };

问题分析：

上述代码的错误在于forEach循环内部的这一行：const [output] = document.querySelectorAll(“.codemirror-textarea”);。尽管外部的forEach(el => …)循环正在遍历所有匹配的textarea元素，但在这行代码中，document.querySelectorAll(“.codemirror-textarea”)会再次查询DOM，并返回一个包含所有匹配元素的NodeList。通过解构赋值[output]，output变量将始终被赋值为这个NodeList中的第一个元素。因此，无论el在当前循环中指向哪个textarea，CodeMirror.fromTextArea(output, …)都会反复地将CodeMirror应用到页面中的第一个.codemirror-textarea元素上。这会导致只有第一个CodeMirror实例被正确渲染，而其他textarea元素则保持原样或被错误地处理。

正确初始化多个CodeMirror实例的方法

解决上述问题的关键在于，在forEach循环中，我们应该直接使用循环提供的当前元素变量（即el）来初始化CodeMirror，而不是在循环内部重复查询DOM并错误地选取元素。el变量在每次迭代时都代表着当前正在处理的textarea元素。

以下是正确初始化多个CodeMirror实例的JavaScript代码：

Tavus

Tavus是一个AI视频生成平台，可以自动将你的视频个性化给每个观众。

84

查看详情

// 正确示例：为所有匹配的 textarea 元素独立初始化 CodeMirror window.onload = function() {     // 遍历所有带有 "codemirror-textarea" 类的 textarea 元素     document.querySelectorAll(".codemirror-textarea").forEach(el => {         // 直接使用当前循环中的元素 'el' 来初始化 CodeMirror         const editor = CodeMirror.fromTextArea(el, {             lineNumbers: true, // 配置选项：显示行号             readOnly: true     // 配置选项：设置为只读模式             // 可以根据需求添加更多配置，例如：             // mode: "javascript", // 设置代码模式             // theme: "dracula"    // 设置主题         });          // 可以在这里对每个 editor 实例进行进一步操作         // 例如，设置初始内容或绑定事件         // editor.setValue("console.log('Hello from CodeMirror instance!');");     }); };

代码解释：

1. window.onload = function() { … };：确保在整个页面（包括所有DOM元素、图片等）加载完毕后再执行CodeMirror的初始化代码，以避免操作不存在的元素。也可以使用document.addEventListener(‘DOMContentLoaded’, function() { … });，它会在DOM结构加载并解析完成后立即执行，无需等待图片等资源。
2. document.querySelectorAll(“.codemirror-textarea”)：获取页面中所有带有codemirror-textarea类的textarea元素，返回一个NodeList。
3. .forEach(el => { … });：遍历这个NodeList。在每次迭代中，el变量将代表当前正在处理的textarea元素。
4. CodeMirror.fromTextArea(el, { … });：这是核心所在。它接收两个参数：
   • 第一个参数是DOM元素，即要转换为CodeMirror编辑器的textarea元素。在这里，我们正确地传入了当前循环中的el。
   • 第二个参数是一个配置对象，用于自定义CodeMirror的行为和外观。示例中设置了lineNumbers: true（显示行号）和readOnly: true（只读模式）。您可以根据实际需求添加或修改其他配置项。

通过这种方式，每个.codemirror-textarea元素都会被独立地转换为一个功能完整的CodeMirror编辑器实例。

注意事项与最佳实践

在部署和使用CodeMirror时，以下几点值得注意：

1. CodeMirror库的引入： 确保在执行上述JavaScript代码之前，已经正确引入了CodeMirror的核心CSS文件（codemirror.css）和JavaScript文件（codemirror.js），以及可能需要的语言模式、主题等附加文件。
2. 脚本加载时机： 将CodeMirror的初始化脚本放在window.onload或DOMContentLoaded事件监听器中是最佳实践。这可以确保在脚本尝试访问DOM元素时，这些元素已经完全加载并可用。
3. 目标元素选择器： document.querySelectorAll()中的选择器（例如.codemirror-textarea）必须准确匹配您希望转换为CodeMirror编辑器的所有textarea元素。
4. 自定义配置： CodeMirror提供了丰富的配置选项。您可以根据项目的具体需求，在fromTextArea的第二个参数中进行个性化设置，例如：
   • mode: 设置代码语言模式（如”javascript“, “python“, “htmlmixed”）。
   • theme: 设置编辑器主题（如”dracula”, “material”, “monokai“）。
   • value: 设置编辑器的初始内容。
   • indentUnit: 缩进单位。
   • tabSize: Tab键宽度。
   • autofocus: 页面加载后是否自动聚焦。
5. 性能考量： 如果页面中存在大量CodeMirror实例（例如数十个或更多），可能会对页面性能造成影响。在这种情况下，可以考虑按需加载、虚拟化技术或优化CodeMirror的配置，以减少资源消耗。
6. CodeMirror实例管理： 如果您需要在初始化后对特定的CodeMirror实例进行操作（例如获取内容、设置内容、销毁），可以将CodeMirror.fromTextArea返回的editor实例存储在一个数组或Map中，以便后续访问。

总结

正确初始化多个CodeMirror实例的关键在于理解JavaScript循环和DOM操作的原理。通过在forEach循环中直接使用当前迭代的元素，我们可以确保CodeMirror被正确地应用到每一个目标textarea上，从而避免常见的渲染错误。遵循本教程提供的正确方法和最佳实践，您将能够高效、稳定地在网页中集成多个CodeMirror编辑器。