online code editor的一些记录

108 阅读1分钟

VS Code从发行后,因其强大的特性获得一批一批的用户关注,我是从2015年开始使用的,在此之前用的Sublime Text,转战到VS Code后其他编辑器就都不再使用了。之后online code editor变得越来越常见,在线playground也越来越多,知识分享越来越方便,真是show me code更加容易了。这些个在线得code editor或者集成的playground大都是用了一个monaco-editor的package. 本文就是对该monaco-editor做一个简单的了解和使用,以方便之后有类似的需求提供方案.

Monaco editor,可以直接运行在浏览器中的编辑器,它是VS Code的开发团队从VS Code编辑器中抽取出来专门用于浏览器中,支持VS Code中的特性,官网原话“The Monaco Editor is the fully featured code editor from VS Code”。

Monaco Editor中涉及到的几个基本概念

  1. Models, 是Monaco editor的核心。一个model就是一个打开的文件,类比于文件系统中的一个文件。
  2. URIs,每一个Model通过URI定位。两个model不能有相同的URL。
  3. Editors,是模型面向用户的view层展示。
  4. Providers,用来增强编辑器的fetures。Providers工作在models层。
  5. Disposables,用来释放资源。

TODO: 后面实施一个online playground的demo,在做记录.