原来这些高大上的在线代码编辑器都是基于它们实现的

yanessa_yu
2,591 阅读4分钟
  • codepen、JSFiddle、JS Bin 基于CodeMirror实现
  • Stackblitz、码上掘金 基于Monaco Editor实现

除了它们用到的CodeMirror和Monaco Editor代码编辑器，还有一个Ace Editor，是当下主流的开源web编辑器。

前世今生

Ace是来自Ajax.org Cloud9 Editor的一个独立的代码编辑器，它的前身是Bespin和后来的Skywriter。这两者最开始走的路线不一样，Bespin基于canvas，Ace基于DOM。Ace发布于2010年，之后Skywriter团队将Skywriter的插件系统和可扩展性融合到了Ace中，便形成了现在的Ace编辑器。现在，Ajax.org和Mozilla都在积极的开发和维护Ace。

CodeMirror的第一版于2007年发布，该版本基于浏览器的contentEditable属性实现。2010年发布的Ace采用了新的技术并证明即使是使用javascript操作数以千行的DOM也不存在性能问题，这驱使了CodeMirror的重构并发布了第二个版本，弃用了之前的contentEditable，性能得到了很大提升。如今，CodeMirror发布最新的重构版本6。

Monaco Editor算是后起之秀，随着2015年VS Code的发布而诞生，它与VS Code使用同样的核心代码。

优缺点：

  • Ace Editor 优点是比较稳定，缺点是样式有点过时，目前社区支持比较薄弱。
  • Monaco Editor 如果不是按需加载，引入的包比较重。Monaco Editor不支持移动端。

codemirror6 codemirror.net/

codemirrir5 codemirror.net/5/

Monaco Editor microsoft.github.io/monaco-edit…

Ace Editor ace.c9.io/

ace-builds github.com/ajaxorg/ace…

1. CodeSandbox

CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目，其提供了多种模块：

图片

CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能：

  • Npm 支持：可以添加几乎任何 npm 上可用的包；
  • 支持 TypeScript、热更新、GitHub 导出、静态文件托管等；
  • 使用 Monaco 编辑器构建，Monaco 是为 VSCode 的提供支持的代码编辑器，有很多相似的体验；
  • 集成的 DevTools、linting、错误覆盖、测试框架 (Jest)等；
  • 强大的 CLI 可以直接将本地项目导入 CodeSandbox。

图片

在线地址：codesandbox.io/

2. Codepen

CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS。CodePen 不仅是一个在线编辑器，还是一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。

图片

在线地址：codepen.io/

底层基于CodeMirror实现

企业微信截图_6cce456d-fdb1-4d9e-893f-fff6f0077b44.png

3. Stackblitz

Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目：

图片

Stackblitz 具有以下特性：

  • 在浏览器中集成了一个 Dev Server，在离线的情况下仍然可以进行开发；
  • 除了支持前端项目外，还支持在浏览器中运行 Node.js 环境；
  • 支持连接 GIthub 仓库，可以直接将代码 push 到  Github 上，也可以拉取 Github 项目进行查看和编辑；
  • 所有应用程序都会自动部署在其服务器上。

图片

底层基于monaco实现

image.png

在线地址：stackblitz.com/

4. JSFiddle

JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示。

图片 底层基于CodeMirror实现

image.png 在线地址：jsfiddle.net/

5. JS Bin

JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的。

图片

底层是基于CodeMirror实现 image.png

在线地址：jsbin.com/

6. 码上掘金

码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

图片

底层是基于monaco实现 image.png

在线地址：code.juejin.cn/

avatar
文章
阅读
粉丝