本文旨在解决在网页中初始化多个CodeMirror编辑器时常见的错误，即代码重复地作用于第一个元素而非遍历所有目标元素。我们将详细阐述正确的初始化方法，通过迭代每个匹配的DOM元素并为其独立创建CodeMirror实例，确保所有目标文本区域都能被正确转换为功能完备的代码编辑器。
理解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}); });}
在这段代码中，document.querySelectorAll(“.codemirror-textarea”) 会返回一个包含所有匹配元素的 NodeList。forEach 方法会遍历这个 NodeList，并将当前元素作为 el 传递给回调函数。然而，在回调函数内部，const [output] = document.querySelectorAll(“.codemirror-textarea”); 这一行又一次执行了查询，并且由于数组解构赋值 [output]，它总是会获取到 NodeList 中的第一个元素。因此，无论循环到哪个 el，CodeMirror.fromTextArea 总是作用于第一个 .codemirror-textarea 元素，导致其他元素未被正确初始化。
正确初始化多个CodeMirror实例
解决上述问题的关键在于，在 forEach 循环内部，我们应该使用当前迭代的元素 el 来创建 CodeMirror 实例，而不是再次查询 DOM。forEach 回调函数中的 el 参数已经指向了当前正在处理的 DOM 元素，直接使用它即可。
以下是正确实现多个CodeMirror实例初始化的方法：
window.onload = function() { // 获取所有带有 'codemirror-textarea' 类的文本区域 document.querySelectorAll(".codemirror-textarea").forEach(el => { // 正确：使用当前循环中的元素 'el' 来初始化 CodeMirror const editor = CodeMirror.fromTextArea(el, { lineNumbers: true, // 显示行号 readOnly: true // 设置为只读模式 // 可以添加更多CodeMirror配置选项 }); });}
在这段修正后的代码中：
document.querySelectorAll(“.codemirror-textarea”) 依然用于获取所有目标文本区域。forEach(el => { … }) 遍历这些元素，将每个元素依次赋值给 el。在循环体内部，CodeMirror.fromTextArea(el, { … }); 直接使用当前的 el 元素来初始化 CodeMirror。这样就确保了每个匹配的文本区域都能拥有自己独立的 CodeMirror 实例。
关键点与注意事项
使用正确的循环变量：在 forEach、for…of 或其他迭代方法中，务必使用循环迭代器提供的当前元素变量来操作，而不是在循环内部重复查询 DOM 或错误地引用固定元素。脚本执行时机：确保 CodeMirror 初始化脚本在所有目标 CodeMirror配置：CodeMirror.fromTextArea() 的第二个参数是一个配置对象，可以根据需求定制编辑器的行为和外观，例如 mode（语言模式）、theme（主题）、lineWrapping（自动换行）等。性能考量：如果页面中存在大量需要转换为 CodeMirror 的文本区域，初始化过程可能会对页面加载性能产生一定影响。在这种情况下，可以考虑延迟加载、按需初始化或虚拟化技术。
总结
正确初始化多个CodeMirror实例的关键在于确保在遍历目标元素时，每个实例都绑定到其对应的DOM元素上。通过利用 forEach 循环提供的当前元素变量，我们可以避免重复引用第一个元素的问题，从而确保所有目标文本区域都能被成功转换为功能完备的CodeMirror编辑器。遵循本文提供的正确方法和注意事项，将有助于您在项目中高效且无误地集成CodeMirror。
以上就是正确初始化CodeMirror多实例的指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576651.html
微信扫一扫 
支付宝扫一扫 
