如何正确初始化并显示多个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代码：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

// 正确示例：为所有匹配的 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编辑器。

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