网页代码编辑器CodeMirror与Ace

网页里要做写代码这件事并不少见，在线代码演示、低代码平台的公式框、后台的模板编辑、教程网站的示例区，甚至帮用户写正则的小工具，都需要一个像样的编辑器。用普通 textarea 体验很差，没有行号、没有语法高亮、缩进全靠手动敲，稍微长一点的代码就没法看。这次整理了 2 款开源免费、可商用的网页代码编辑器库，都是从各大代码托管平台和云 IDE 里走出来的成熟项目，完整的编辑体验开箱即用。

两款库分别适合谁

CodeMirror 5 是老牌选手，体积小、启动快、稳定，内置行号、括号匹配、自动缩进、代码折叠、多光标和搜索替换，语法高亮覆盖上百种语言，还支持自动补全和括号自动闭合等扩展，主题也很多。Ace 的功能和性能都更重一些，除了同样的编辑能力，它把语法分析放在后台线程里跑，开大文件也不会卡，支持的语言模式和主题数量都很可观，很多在线判题系统和云 IDE 用的就是它。简单说，想小而快用 CodeMirror 5，想要功能最全用 Ace。

为什么值得用这两款

用户对代码输入框的期待已经被各种编辑器养刁了，给他一个光秃秃的文本框，第一反应就是这东西也能用？加上行号和语法高亮，代码一眼能看清结构，写错的括号和引号也更容易发现；加上括号匹配和自动缩进，输入效率立刻上去。这些体验投入并不大，但对做开发者工具的产品来说，几乎是及格线。反过来看，自己从零实现高亮和缩进，工作量远超引入一个成熟库，还不一定做得好。

用的时候注意什么

一是别一次把所有语言和主题都引进来。这类编辑器的模式和主题是按需加载的，你只让用户写 JSON，就只引 JSON 那个模式文件，全引会让页面加载一堆用不上的东西。二是可以配键盘映射，默认、Vim、Emacs 风格都有，用户习惯了哪种就给哪种，顺手程度差别很明显。三是编辑器里的内容取自用户时同样要注意转义和校验，别以为放进编辑器就安全了，真正落库和渲染的地方还得再处理一遍。

包内容和用法

压缩包里按库名分成了两个目录。CodeMirror 5 目录里放了核心文件、上百种语言的模式、常用扩展、主题和键盘映射；Ace 目录里放了核心文件、常用语言模式、全部主题、语法检查用的 worker 文件和几个常用扩展。两款库都互相独立、不依赖任何框架，用 script 标签引入，样式文件记得一起引，否则编辑器会没样式。正式项目引压缩版即可，调试时再看非压缩版。每个目录都附带了说明文档和许可文件。

代码编辑器是那种看起来是小事、做不好很掉分的组件。尤其面向开发者的产品，用户对编辑体验特别敏感，一个卡顿或者没有高亮的输入框，很容易被吐槽。用成熟库把这块兜住，把精力留给真正有差异化的功能更划算。这两个库加起来不到两兆，按需引入体积可控，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。