用Monaco Editor取代Ace Editor打赏

大概在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无异,有需要的童鞋可以尝试一下。

用Monaco Editor取代Ace Editor
文章《用Monaco Editor取代Ace Editor》二维码
  • 微信打赏
  • 支付宝打赏

已有10条评论

  1. 游客 312

    对于我这个新手来说很实用了

    2021-03-03 18:17 回复
  2. 招标中标

    文章写的不错,值得分享

    2020-12-17 17:42 回复
  3. 游客 375

    回想以前,

    2020-09-11 11:11 回复
  4. 游客 785

    真正编程需要大量调试的

    2020-03-03 17:26 回复
  5. 游客 490

    处于标签之前。例如:

    2020-03-03 17:26 回复
  6. 外星人源码商城

    我要试试

    2020-02-16 23:41 回复
  7. 热搜榜

    文章不错非常喜欢,支持一下

    2020-01-11 00:16 回复
  8. VPS234

    感觉在线编程只是适合一些新手和教程用户,真正编程需要大量调试的

    2019-08-29 13:55 回复
  9. 今日头条新闻

    文章不错支持一下吧

    2019-08-07 01:00 回复
  10. 游客 973

    谢谢博主分享

    2019-07-30 10:15 回复

(必填)

(必填)

(可选)