本教程旨在解决在使用 CodeMirror 时，循环初始化多个文本区域时遇到的常见问题。许多开发者错误地在循环内部重复选择所有元素并仅作用于第一个，导致只有首个 CodeMirror 实例被正确配置。本文将详细解释此错误原因，并提供一个简洁高效的解决方案，确保所有指定的文本区域都能被正确转换为独立的 CodeMirror 编辑器。
codemirror 是一个功能强大的浏览器内代码编辑器，广泛用于需要代码高亮、行号、语法检查等功能的场景。在许多应用中，我们可能需要在同一个页面上展示多个独立的 codemirror 编辑器实例，例如，在一个文档中展示多个代码示例，或者在一个表单中提供多个可编辑的代码块。正确地初始化这些实例是确保功能正常运行的关键。
常见初始化陷阱与原因分析
当尝试初始化页面上所有带有特定类的 textarea 元素为 CodeMirror 实例时，开发者常常会遇到一个问题：尽管代码似乎遍历了所有元素，但最终只有第一个 textarea 被成功转换。这通常源于对 JavaScript 循环和 DOM 元素选择器理解的偏差。
考虑以下一个常见的错误实现：
window.onload = function() { document.querySelectorAll(".codemirror-textarea").forEach(el => { // 错误：这里再次查询所有元素，并始终选取第一个 const [output] = document.querySelectorAll(".codemirror-textarea"); const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true}); });}
这段代码的意图是遍历所有带有 codemirror-textarea 类的 textarea 元素，并为它们分别初始化 CodeMirror。然而，其核心问题在于 forEach 循环内部的这一行：const [output] = document.querySelectorAll(“.codemirror-textarea”);。
重复查询： 在 forEach 循环的每一次迭代中，document.querySelectorAll(“.codemirror-textarea”) 都会被重新执行，它会再次返回页面上所有匹配的元素组成的 NodeList。始终选取第一个： const [output] = … 是一种数组解构赋值，它会从 querySelectorAll 返回的 NodeList 中，无论该 NodeList 有多少个元素，都只提取并赋值给 output 第一个元素。循环变量未被使用： 这导致在每次循环中，CodeMirror.fromTextArea(output, …) 始终作用于页面上的 第一个 .codemirror-textarea 元素，而循环变量 el（代表当前迭代的元素）则被完全忽略了。
因此，无论页面上有多少个 codemirror-textarea 元素，这段代码只会尝试对第一个元素反复进行 CodeMirror 的初始化操作（实际上只有第一次会成功，后续操作可能无实际效果或引发不必要的开销），而其他元素则保持不变。
正确初始化多个 CodeMirror 实例
解决上述问题的关键在于，在 forEach 循环内部，我们应该直接使用循环提供的当前元素变量，而不是再次查询 DOM 并选择第一个元素。
以下是正确的实现方式：
window.onload = function(e) { // 获取所有需要转换为 CodeMirror 的 textarea 元素 document.querySelectorAll(".codemirror-textarea").forEach(el => { // 正确：直接使用当前循环迭代的元素 'el' const editor = CodeMirror.fromTextArea(el, {lineNumbers: true, readOnly: true}); // 可以在这里对每个编辑器实例进行进一步配置或操作 // 例如：editor.setValue("Hello World!"); });}
在这个修正后的代码中：
document.querySelectorAll(“.codemirror-textarea”) 只在 window.onload 函数开始时执行一次，获取所有目标元素。forEach(el => { … }) 遍历这个 NodeList，在每次迭代中，el 变量都代表当前正在处理的 textarea 元素。CodeMirror.fromTextArea(el, { … }) 直接将当前的 el 元素转换为 CodeMirror 编辑器，确保每个匹配的 textarea 都能被正确地初始化。
注意事项与最佳实践
DOM 加载时机： 确保在 DOM 完全加载后再尝试初始化 CodeMirror 实例。使用 window.onload 或 document.addEventListener(‘DOMContentLoaded’, …) 是常见的做法。window.onload 会等待所有资源（包括图片、样式表等）加载完毕，而 DOMContentLoaded 则在 DOM 结构准备就绪时触发，通常更快。元素选择器的精确性： 使用精确的 CSS 选择器（如 .codemirror-textarea 或 textarea[data-editor]）来定位需要初始化的元素，避免意外影响其他 textarea。配置选项： CodeMirror.fromTextArea() 的第二个参数是一个配置对象，可以根据需要为每个编辑器实例设置不同的选项，例如 mode（语言模式）、theme（主题）、readOnly（只读模式）等。动态添加元素： 如果页面上的 CodeMirror 元素是动态通过 JavaScript 添加的，那么在添加元素之后，你需要再次运行初始化逻辑来为新添加的元素创建 CodeMirror 实例。性能考虑： 对于页面上存在大量 CodeMirror 实例的情况，应考虑其对页面加载和运行时性能的影响。合理规划编辑器数量，或在必要时采用懒加载等优化策略。
总结
正确初始化多个 CodeMirror 实例的关键在于理解 JavaScript 循环和 DOM 操作的机制。避免在循环内部重复查询并错误地选取第一个元素，而是直接利用 forEach 循环提供的当前元素引用。遵循这些最佳实践，可以确保您的应用程序中的所有 CodeMirror 编辑器都能按预期工作，提供一致且高效的用户体验。通过本文的指导，您应该能够自信地在项目中集成和管理多个 CodeMirror 实例。
以上就是如何正确初始化并显示多个 CodeMirror 编辑器实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576573.html
微信扫一扫 
支付宝扫一扫 
