用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》二維碼
  • 微信打賞
  • 支付寶打賞

已有1條評論

  1. 游客 973

    謝謝博主分享

    2019-07-30 10:15 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖