CodeMirror

定义

CodeMirror 是一个以 JavaScript 编写、供浏览器使用的代码编辑器组件。它本身并不是一个完整的网页应用，而是一段可以嵌入页面、把普通的文本输入区域替换成具备代码编辑能力的控件^[2]。其核心库只提供编辑器本身，按钮、自动补全等更接近集成开发环境的功能并不内置，而是交给开发者在该核心之上按需实现^[2]。

开发者调用它时，通常先加载脚本与样式表，再加载目标语言的模式文件，然后通过构造函数把编辑器挂载到某个页面元素上；也可以让它直接接管一个已有的 textarea 元素，使表单提交时内容仍能同步回原来的输入框^[2]。

原理

CodeMirror 依靠「模式」来理解代码。模式是一段 JavaScript 程序，它逐行读入文本流，把内容切分成记号，并为每个记号返回一个样式名，编辑器据此给不同语法成分着色，必要时还提供上下文相关的缩进^[2]。由于记号不会跨行，模式需要一个状态对象来保存跨行信息，并在每一行读取结束后更新该状态；需要为整篇文档重建解析时，编辑器只需从某一行使用当时保存的状态继续即可^[2]。

第 5 版及更早的版本把编辑器的文档、选区与撤销历史封装成文档对象，位置用行号与行内偏移表示，并把 DOM 操作包装在缓冲机制中，等到一批操作结束后才统一更新页面结构，以减少重绘开销^[2]。第 6 版改为以偏移量表示位置，即从文档开头数起的字符数，理由是处理纯数字比处理位置对象更简单高效；配置也不再是一组具名选项，而是一棵由扩展值构成的树，更新则通过事务统一派发^[4]。

对于超长文档，编辑器只渲染滚动可见范围内的内容并附加一定余量，从而在庞大的文件上仍能保持响应^[2]。

发展历程

CodeMirror 最初是为一个 JavaScript 教学网站的控制台而写，代码在 2007 年首次打包发布，早期版本依赖浏览器的 contentEditable 能力^[3]。2010 年末，另一个 JavaScript 代码编辑器项目展示了在浏览器中处理数千行文档而不明显损失性能的可行做法，受此推动，CodeMirror 沿相同思路重写，产出的第 2 版不再依赖 contentEditable，性能显著改善^[3]。

第 3 版与第 5 版在 2010 年代持续迭代，随版本更替不断加入新的语言模式、选项与插件，例如 2013 年发布的 3.13 版新增了 COBOL、HAML 模式以及注释插件^[5]。第 5 版将自身定位为在浏览器中运行的通用文本编辑器，默认支持上百种语言，并在该分支上长期维护，发布了 5.65 系列等小版本^[1][6]。

第 6 版于 2022 年发布，是对旧版的彻底重写，与旧代码在接口上并不兼容^[3]。它把库拆分成一组各自独立发布的包，核心包与语言支持包分开维护，并且只以模块形式提供，使用前通常需要构建步骤^[4]。该版本着重改善了无障碍访问与触屏设备上的编辑体验，并采用完整的解析树来支撑语言集成。

应用

CodeMirror 的典型用途是在网页里提供一个面向源码的输入区域，因此常见于在线代码演示、教学页面、配置编辑界面以及各类需要用户直接编写脚本的工具中^[1]。第 6 版自带的示例就包含在页面中编辑 JavaScript 并即时运行的做法，只加载语言包、基础设置与键位映射即可构成一个可用的编辑环境。

在功能层面，它可提供语法着色、自动补全、代码折叠、搜索与替换、括号与标签匹配、行号与其他可编程标尺、多选区编辑、双向文本支持，以及 Vim、Emacs、Sublime Text 风格的键位绑定^[1]。第 6 版还提供协作编辑示例，允许同一文档由多名用户同时修改。此外，模式可以在不打开编辑器实例的情况下单独用于给页面上的代码片段着色，便于静态展示^[2]。

局限

核心库只提供编辑器部件，自动补全、搜索界面、代码折叠等能力都需要另行加载插件或自行编写代码才能提供给用户^[2]。语法着色由模式决定，一种语言只有存在对应模式时才会被着色，新语言的支持通常需要有人编写模式^[5]。

为保持响应，编辑器在高亮超长行时会放弃精确处理，从某一位置起把剩余部分按纯文本呈现，默认阈值是一万个字符；关闭该行为会让长行处理变得昂贵^[2]。早期版本对移动端浏览器的支持属于实验性质，存在较多难以规避的怪异行为^[1]。

第 6 版不与第 5 版接口兼容，从旧版迁移涉及模块系统、位置表示、配置方式、DOM 结构与事件机制的全面改动，例如自定义 CSS 的类名需要重新对应，原先依赖事件通知的写法要改由事务和状态字段承担^[4]。该版本还取消了第 5 版中用于把编辑器套在 textarea 上的便捷方法，改用由开发者自行编写的替代写法^[4]。

参见

• JavaScript —— CodeMirror 以该语言编写并在浏览器中运行。

• 语法高亮 —— 编辑器通过语言模式实现的主要功能之一。

• 可扩展标记语言 —— 编辑器内置支持的常见标记语言之一。

• 集成开发环境 —— 自动补全、代码折叠等编辑功能通常所属的软件类别。

• 开放源代码 —— 该组件采用的发布与协作方式。