本文旨在解决在使用CodeMirror库时，循环初始化多个代码编辑器实例的常见错误。通过分析错误代码中对DOM元素的错误引用，本教程将展示如何正确地遍历并为页面上的每一个指定元素独立初始化CodeMirror编辑器，确保所有代码块都能被正确渲染和功能化，从而避免仅第一个实例生效的问题。

codemirror是一款功能强大的javascript库，用于在网页中创建代码编辑器，支持语法高亮、行号显示、代码折叠等特性。在许多应用场景中，我们可能需要在同一个页面上展示多个代码片段，并为每个片段都启用codemirror编辑器。然而，如果初始化逻辑处理不当，可能会导致只有第一个代码块被正确渲染，而其他代码块则保持原始的文本区域状态。

理解多实例初始化中的常见错误

在使用document.querySelectorAll获取页面上所有符合条件的元素后，我们通常会通过forEach循环来遍历这些元素并进行初始化。一个常见的错误模式是在循环内部再次尝试获取所有元素，并且错误地只选取第一个元素进行操作。

考虑以下示例代码，它试图为所有具有codemirror-textarea类的<textarea>元素初始化CodeMirror：

window.onload = function() {     document.querySelectorAll(".codemirror-textarea").forEach(el => {         // 错误：这里每次循环都重新查询所有元素，并只取第一个         const [output] = document.querySelectorAll(".codemirror-textarea");         const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});     }); }

这段代码的逻辑问题在于const [output] = document.querySelectorAll(“.codemirror-textarea”);这一行。在forEach循环的每一次迭代中，它都会重新执行document.querySelectorAll(“.codemirror-textarea”)来获取所有匹配的元素，然后使用解构赋值[output]来始终获取这个NodeList中的第一个元素。这意味着，无论循环进行到哪一个el，CodeMirror都只会不断地在第一个匹配的<textarea>元素上重复初始化，导致其他元素被忽略。

正确初始化多个CodeMirror实例

要正确地为每个目标元素初始化CodeMirror，关键在于在forEach循环内部，直接使用循环变量el（代表当前正在迭代的元素）作为CodeMirror.fromTextArea()的参数。这样可以确保每个CodeMirror实例都与它对应的特定<textarea>元素绑定。

Vmake AI

全能电商创意工作室：生成AI服装虚拟模特

105

查看详情

以下是修正后的代码示例：

window.onload = function(e) {     document.querySelectorAll(".codemirror-textarea").forEach(el => {         // 正确：直接使用循环变量 el 来初始化当前的 textarea 元素         const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true});         // 可选：如果需要对每个编辑器实例进行后续操作，可以将其存储起来         // el.CodeMirrorInstance = editor;      }); }

在这段修正后的代码中，forEach循环遍历了所有.codemirror-textarea元素。在每次迭代中，el变量代表了当前正在处理的<textarea>元素。CodeMirror.fromTextArea(el, …)则将CodeMirror编辑器正确地附加到这个特定的el元素上。通过这种方式，页面上的每一个codemirror-textarea都将拥有一个独立的、功能完整的CodeMirror编辑器。

注意事项与最佳实践

1. DOM加载时机: 示例中使用了window.onload事件来确保所有DOM元素都已加载完毕。对于更快的初始化，可以考虑使用document.addEventListener(‘DOMContentLoaded’, …)，它在DOM树构建完成但图片等外部资源未完全加载时触发。
2. CodeMirror配置: CodeMirror.fromTextArea()的第二个参数是一个配置对象，可以根据需要定制编辑器的行为和外观，例如：
   • mode: 设置语言模式（如”javascript”, “python“, “htmlmixed”）。
   • theme: 设置编辑器主题（如”dracula”, “material”）。
   • readOnly: 设置为true时编辑器不可编辑。
   • lineNumbers: 是否显示行号。
   • 更多选项请参考CodeMirror官方文档。
3. 动态内容: 如果页面上的CodeMirror实例是动态添加的（例如通过AJAX加载），则需要在新内容加载并插入DOM后，再次执行document.querySelectorAll和forEach循环来初始化这些新的编辑器实例。
4. 实例引用: 如果后续需要通过JavaScript操作某个特定的CodeMirror编辑器实例（例如设置内容、获取内容、刷新等），可以在初始化时将editor对象存储在一个数组或关联到对应的DOM元素上，如el.CodeMirrorInstance = editor;。

总结

正确地初始化多个CodeMirror实例的关键在于确保在循环遍历DOM元素时，每次都将CodeMirror绑定到当前循环所指向的特定元素上，而不是重复引用第一个元素。通过避免常见的DOM元素引用错误，我们可以确保页面上的所有代码块都能被CodeMirror正确渲染和管理，从而提供一致且专业的代码展示体验。遵循本文提供的正确初始化模式和注意事项，将有助于构建更健壮、更用户友好的Web应用程序。