本教程详细讲解了在网页中正确初始化多个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代码：
// 正确示例：为所有匹配的 textarea 元素独立初始化 CodeMirrorwindow.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!');"); });};
代码解释：
window.onload = function() { … };：确保在整个页面（包括所有DOM元素、图片等）加载完毕后再执行CodeMirror的初始化代码，以避免操作不存在的元素。也可以使用document.addEventListener(‘DOMContentLoaded’, function() { … });，它会在DOM结构加载并解析完成后立即执行，无需等待图片等资源。document.querySelectorAll(“.codemirror-textarea”)：获取页面中所有带有codemirror-textarea类的textarea元素，返回一个NodeList。.forEach(el => { … });：遍历这个NodeList。在每次迭代中，el变量将代表当前正在处理的textarea元素。CodeMirror.fromTextArea(el, { … });：这是核心所在。它接收两个参数：第一个参数是DOM元素，即要转换为CodeMirror编辑器的textarea元素。在这里，我们正确地传入了当前循环中的el。第二个参数是一个配置对象，用于自定义CodeMirror的行为和外观。示例中设置了lineNumbers: true（显示行号）和readOnly: true（只读模式）。您可以根据实际需求添加或修改其他配置项。
通过这种方式，每个.codemirror-textarea元素都会被独立地转换为一个功能完整的CodeMirror编辑器实例。
注意事项与最佳实践
在部署和使用CodeMirror时，以下几点值得注意：
CodeMirror库的引入： 确保在执行上述JavaScript代码之前，已经正确引入了CodeMirror的核心CSS文件（codemirror.css）和JavaScript文件（codemirror.js），以及可能需要的语言模式、主题等附加文件。脚本加载时机： 将CodeMirror的初始化脚本放在window.onload或DOMContentLoaded事件监听器中是最佳实践。这可以确保在脚本尝试访问DOM元素时，这些元素已经完全加载并可用。目标元素选择器： document.querySelectorAll()中的选择器（例如.codemirror-textarea）必须准确匹配您希望转换为CodeMirror编辑器的所有textarea元素。自定义配置： CodeMirror提供了丰富的配置选项。您可以根据项目的具体需求，在fromTextArea的第二个参数中进行个性化设置，例如：mode: 设置代码语言模式（如”javascript”, “python”, “htmlmixed”）。theme: 设置编辑器主题（如”dracula”, “material”, “monokai”）。value: 设置编辑器的初始内容。indentUnit: 缩进单位。tabSize: Tab键宽度。autofocus: 页面加载后是否自动聚焦。性能考量： 如果页面中存在大量CodeMirror实例（例如数十个或更多），可能会对页面性能造成影响。在这种情况下，可以考虑按需加载、虚拟化技术或优化CodeMirror的配置，以减少资源消耗。CodeMirror实例管理： 如果您需要在初始化后对特定的CodeMirror实例进行操作（例如获取内容、设置内容、销毁），可以将CodeMirror.fromTextArea返回的editor实例存储在一个数组或Map中，以便后续访问。
总结
正确初始化多个CodeMirror实例的关键在于理解JavaScript循环和DOM操作的原理。通过在forEach循环中直接使用当前迭代的元素，我们可以确保CodeMirror被正确地应用到每一个目标textarea上，从而避免常见的渲染错误。遵循本教程提供的正确方法和最佳实践，您将能够高效、稳定地在网页中集成多个CodeMirror编辑器。
以上就是如何正确初始化并显示多个CodeMirror实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576583.html
微信扫一扫 
支付宝扫一扫 
