大概在5年前,曾分享过一篇《ACE Editor在线代码编辑器简介及使用引导》,恰巧最近我们产品上又有用到Ace Editor,看了下博客,没曾想,在五年后的今天,还有相当一部分人通过搜索引擎搜到这篇文章。不过在这次使用中,也发现了诸多不爽,主要有:不支持es6的import导入(需要二次封装);自带模块加载器和webpack打包的项目不太好结合等。所幸的是,在github上找到了现成的二次封装版本https://github.com/vue-bulma/brace(刚好我们在用Vue)。

不过今天主角并不是Ace Editor,在这个开源项目遍地开花的年代,“巨硬”不但收购了GitHub,还不断在GitHub上开源新项目,而这个名为Monaco Editor的开源项目,就是前几年新推出的VSCode的核心代码抽取出来的web版,简单尝试了下,完全能覆盖Ace Editor带给我们的功能。

项目地址:https://github.com/Microsoft/monaco-editor

安装使用非常简单,只用

npm install monaco-editor

随后在需要的地方(官方例子)

import monaco from 'monaco-editor'

monaco.editor.create(document.getElementById("container"), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: "javascript"
});

其中language指定语言,value指定显示值,更多功能建议参考官方文档

文档地址:https://microsoft.github.io/monaco-editor/

简单尝试了下,效果非常赞,几乎和本地版VSCode无异,有需要的童鞋可以尝试一下。