博客升级之在线代码编辑器

最近打算对个人博客进行优化，主要涉及两个方面，文章编辑器和代码展示分享模块，因此就需要考虑选择什么样的在线编辑器，顺道总结一下在线代码编辑及分享一些可能用得上的优秀代码编辑器。

在线代码编辑器是一个部署在远程服务器上，可通过浏览器访问的在线工具，即可以进行在线编码。低代码平台是最近一两年比较火的概念，此类产品平台少不了在线代码编辑器。在线代码编辑器主要分为两类，一类是具有类似于文本编辑器的基本功能，一类则类似于完整的 IDE。

在本文中，将分别介绍这两种类型。

一些在线代码编辑器专注于一种语言甚至一个框架。例如，有些产品自称是 javascript 在线代码编辑器 或 react 在线编辑器。

为什么需要在线代码编辑器？

首先思考一下在什么情况下需要使用在线代码编辑器。

远程协作

使用桌面 IDE 设置协作过程可能存在不便，使用在线代码编辑器，可以让其任务变得简单，就像在 Google Docs 中创建文档一样。

代码分享

可以使用在线代码编辑器与同事、朋友或全世界分享代码，可以在博客文章、操作指南、文档中使用沙箱嵌入或链接。

快速部署

有一些在线代码编辑器集成了主流的主机功能，可以开发一个简单的应用程序，并在几分钟内部署它以进行测试。个人认为这是低代码平台集成在线代码编辑器的主要原因之一。

在线面试

使用在线代码编辑器，可以在招聘的过程中快速考察候选人的编码能力。大厂面试基本都使用这种方式考察候选者的编码能力。

原型制作

可以快速验证测试一些想法，并从用户那里获得即时反馈。

学习

现代 Web 开发中，值得关注最新消息，甚至更好的是，在真实条件下尝试它们。最好的在线代码编辑器可快速完成此操作，而无需进行不必要的设置。

如何选择在线代码编辑器？

大多数主流的在线代码编辑器功能都很丰富，包括自动完成编译、git 集成、插件支持、CI/CD 管道等，正是这些功能可以使特定编辑器比其他编辑器更适合。

下面是在选择在线 IDE 或者代码编辑器考虑的条件，但不局限一下条件：

• 运行速度；

• 是否免费

• 与代码仓库的集成；

• 易于设置；

• 语言支持；

• NPM 支持；

• 终端支持；

• 文本和布局设置

在线代码编辑器的核心功能

在线编辑器必须具备的基本功能：

• 分享；

• 布局设置；

• 协作；

• 制表设置；

• 评论；

• 结果视图；

• 基本文件结构

在线代码编辑器的优缺点

优点

零设置：无需下载、安装和配置 IDE；共享和协作：开始编码，然后将 URL 转发给队友以继续项目开发的工作或协助调试；零或很少的成本：绝大多数在线代码编辑器都有免费版本，足以应付大部分日常任务；

缺点

功能有限：一些代码编辑器甚至缺少被称为代码编辑器的基本功能；性能问题：许多基于 Web 的 IDE 和代码编辑器都存在性能问题；没有版本控制：绝大多数在线代码编辑器没有与 git 工具集成；

推荐代码编辑器

1. Codepen

项目地址：https://codepen.io/

Codepen 算是在线代码编辑器市场上最受欢迎的工具之一。该平台在某种程度上开始演变为社交网络，类似于 Pinterest。开发者可以在整个平台上分享他们的最佳实践和 Pin 图，并获得社区的批准。

该工具内部有一个完善的搜索，可以发现感兴趣的模板、项目、代码片段和主题，也是一个不错的代码学习平台。

Codepen 的最大的优势是学习和发现新技术及代码最佳实践，浏览、工作和使用 Pens 是了解它们如何构建以及代码如何工作的好方法。

另一个产品细节是代码的呈现模式，在会议、聚会和代码分享讨论中非常有用。

2. Stackblitz

项目地址：https://stackblitz.com/

Stackblitz 与完整的 IDE 非常相似，特别是 VsCode，该工具是基于 VsCode 代码构建的，具有丰富的功能，可以开始和继续开发完整的全栈应用程序。该工具由 Visual Studio 提供支持。

它会在键入时自动安装依赖项、编译、捆绑和热重载。

导入库对于 Web 开发至关重要，因此 StackBlitz 包含一个浏览器内 npm 客户端，支持一次安装多个包和特定版本，是一个非常不错的功能。

Stackblitz 的杀手锏是离线编辑，Stackblitz 开发了一个浏览器内的网络服务器来实现这一目标。

使用 Stackblitz，可以在单独的窗口中进行预览和编辑，这与 iframe 或其他项目上的小窗口相比非常棒。还支持连接到 Github 并能方便的 导入/导出项目、与 Google Firebase 集成以创建全栈项目。

3. Playcode

项目地址：https://playcode.io/

Playcode 只是一个用于快速原型设计和查看编码结果的简单工具。该工具具有经典的三窗口布局：代码编辑器、控制台和结果视图。该产品具有基本的文件结构，但没有版本控制和其他 IDE 功能。

它仅支持 JavaScript、HTML 和 CSS，还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。

4. JSfiddle

项目地址：https://jsfiddle.net/

JSfiddle 是一个简单但非常流行、快速、高效的在线代码编辑器，个人觉得和 Codepen 类似。该工具允许快速共享代码并将结果可视化预览。这个工具非常流行和简单，并集成了 StackOverflow。

从视觉上看，像大多数平台一样，如 Codepen，界面被分为 4 个区域：用于编写代码的区域、用于编辑 CSS、SCSS 或 sass 的区域，用于 HTML 布局的区域以及用于预览结果的区域。

JSfiddle 有非常好的和完整的文档，以及一个可以进行投票的开发社区。包含 Vue、Jquery、React + JSX 和其他语言的代码模板，可以让开发者快速上手。

和类似 IDE 的在线编辑器相比，JSfiddle 不支持文件和文件夹的概念，并且无法构建 CI/CD 管道，因此主要用于前端展示。

5. Jsoneditoronline

项目地址：https://jsoneditoronline.org/

Jsoneditoronline 是一种基于 Web 的工具，用于查看、编辑和格式化 JSON 数据。能够清晰、可编辑的树视图或代码编辑器中格式化的显示 JSON 数据。可以将文档存储在本地或云端。

可以通过链接共享文档、以纯代码或树的形式查看 JSON 文件、进行查询，还可以将文件保存在本地。

6. Codesandbox

项目地址：https://codesandbox.io/

包括主流前端框架的模板，如 React、Vue、Angular 和 NodeJs、Next 等。

Codesandbox 定位为一个开发平台，社区制作了很多代码模板。此外，可以使用文件结构和依赖项为特定用例创建自己的模板，就像在使用 IDE 中一样。

该工具与 Github 集成，可以轻松创建提交和审查 PR。开箱即用，可以将应用程序部署到 ZEIT 或 Netlify。

Codesandbox 在线代码编辑器中提供了 NPM 支持，此外，还有一个热模块重新加载。当然，每个 sandbox 都有一个安全 URL，支持 HTTPS 共享和反馈。

在协作方面，可以与同事实时协作，就像远程控制一样控制谁可以编辑或观看代码。

此外还有其他的功能，例如：

• 控制台；

• 测试视图；

• 内置终端；

• Jest 测试的自动运行；

• 热模块重载；

• 项目组织；

• 将代码导出为 zip；

• 内置 linter (ESlint)

7. TinyMCE

项目地址：https://www.tiny.cloud/

TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器，同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala 等等。目前个人博客后台的编辑器就是集成了 TinyMCE。

8. StackEdit

项目地址：https://stackedit.io/

StackEdit 是一个在线 Markdown 编辑器，可以同步文件与谷歌驱动器、Dropbox 和 GitHub，也可以将其作为博客发布到 Blogger、WordPress 和 Zendesk。

9. Editor.md

项目地址：https://pandao.github.io/editor.md/index.html

Editor.md 是一个开源在线 Markdown 编辑器，支持 Markdown 转 HTML 的显示处理，打算将其集成到博客后台中。

总结

上面是个人觉得不错的在线编辑器，有些在项目中也使用了，欢迎推荐好用的 Markdown 编辑器。