用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无异,有需要的童鞋可以尝试一下。
- 固定链接:https://www.poorren.com/replace-ace-editor-with-monaco-editor
- 文章标签:ace,aceeditor,monaco,monaco editor,在线编辑器
- 扫二维码:用Monaco Editor取代Ace Editor
- 版权所有:除"转载分享"分类外,未经注明,均为原创、整理,转载请注明出处。
对于我这个新手来说很实用了
文章写的不错,值得分享
回想以前,
真正编程需要大量调试的
处于标签之前。例如:
我要试试
文章不错非常喜欢,支持一下
感觉在线编程只是适合一些新手和教程用户,真正编程需要大量调试的
文章不错支持一下吧
谢谢博主分享