如何正确初始化并显示多个 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");。

1. 重复查询： 在 forEach 循环的每一次迭代中，document.querySelectorAll(".codemirror-textarea") 都会被重新执行，它会再次返回页面上所有匹配的元素组成的 NodeList。
2. 始终选取第一个： const [output] = ... 是一种数组解构赋值，它会从 querySelectorAll 返回的 NodeList 中，无论该 NodeList 有多少个元素，都只提取并赋值给 output 第一个元素。
3. 循环变量未被使用： 这导致在每次循环中，CodeMirror.fromTextArea(output, ...) 始终作用于页面上的 第一个 .codemirror-textarea 元素，而循环变量 el（代表当前迭代的元素）则被完全忽略了。

因此，无论页面上有多少个 codemirror-textarea 元素，这段代码只会尝试对第一个元素反复进行 CodeMirror 的初始化操作（实际上只有第一次会成功，后续操作可能无实际效果或引发不必要的开销），而其他元素则保持不变。

正确初始化多个 CodeMirror 实例

解决上述问题的关键在于，在 forEach 循环内部，我们应该直接使用循环提供的当前元素变量，而不是再次查询 DOM 并选择第一个元素。

AI图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

以下是正确的实现方式：

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 都能被正确地初始化。

注意事项与最佳实践

1. DOM 加载时机： 确保在 DOM 完全加载后再尝试初始化 CodeMirror 实例。使用 window.onload 或 document.addEventListener('DOMContentLoaded', ...) 是常见的做法。window.onload 会等待所有资源（包括图片、样式表等）加载完毕，而 DOMContentLoaded 则在 DOM 结构准备就绪时触发，通常更快。
2. 元素选择器的精确性： 使用精确的 CSS 选择器（如 .codemirror-textarea 或 textarea[data-editor]）来定位需要初始化的元素，避免意外影响其他 textarea。
3. 配置选项： CodeMirror.fromTextArea() 的第二个参数是一个配置对象，可以根据需要为每个编辑器实例设置不同的选项，例如 mode（语言模式）、theme（主题）、readOnly（只读模式）等。
4. 动态添加元素： 如果页面上的 CodeMirror 元素是动态通过 JavaScript 添加的，那么在添加元素之后，你需要再次运行初始化逻辑来为新添加的元素创建 CodeMirror 实例。
5. 性能考虑： 对于页面上存在大量 CodeMirror 实例的情况，应考虑其对页面加载和运行时性能的影响。合理规划编辑器数量，或在必要时采用懒加载等优化策略。

总结

正确初始化多个 CodeMirror 实例的关键在于理解 JavaScript 循环和 DOM 操作的机制。避免在循环内部重复查询并错误地选取第一个元素，而是直接利用 forEach 循环提供的当前元素引用。遵循这些最佳实践，可以确保您的应用程序中的所有 CodeMirror 编辑器都能按预期工作，提供一致且高效的用户体验。通过本文的指导，您应该能够自信地在项目中集成和管理多个 CodeMirror 实例。

以上就是如何正确初始化并显示多个 CodeMirror 编辑器实例的详细内容，更多请关注php中文网其它相关文章！