monaco editor新一代前端UI編輯器

2021-10-23 15:28:59 字數 999 閱讀 8300

業務場景:編輯自動化指令碼,開放自動編輯,需要採用一款編輯器,之前有在其他專案看到,發現這款適用於前端的編輯器真心不錯,良心推薦!

這是官方位址   可以體驗下強大之處(基本包涵了大部分的idea和vscode的功能)

廢話不多說,直接上手vue專案對接,步驟如下:

1安裝 

npm install monaco-editor-vue
npm install monaco-editor-webpack-plugin
注意檢視版本editor-vue版本略高於plugin版本,官網issue下有關於版本對應資訊

2在專案中引入

2.1在build檔案中,類如webpack.conf.json檔案中新增plugin外掛程式

const monacowebpackplugin = require('monaco-editor-webpack-plugin')
在plugins新增支援的外掛程式(基本支援下面大部分語言)

3在需要的地方引入元件

components:
基礎標籤

在js的data中配置

editoroptions: ,

fontsize: 15 --字型大小

}

基礎配置完了,檢視效果(這是shell指令碼)

基本滿足業務需求!

補充:api/modules/monaco.editor.html#editoroptions

editoroptions引數相關

api/inte***ces/monaco.editor.ieditor.html  統一

新一代IM工具

深圳kc公司推出的 第二代即時通訊 軟體 kc不僅分文不取,還在各種深度im應用以外提供了眾多傳統的 有償服務 如每月300條簡訊 每月10分鐘國內長途 等等,而這些都是免費的!下面我們就來一睹這款軟體的真容!keep contact 簡稱kc 是一款新型的免費即時通訊 軟體。它集合網路 簡訊 彩信...

新一代程式語言

新一代程式語言?完全是譁眾取寵的標題,無非是想多吸引一些看客。對於現在的程式語言,老實說,不太滿意,感覺很多不方便,這是我心目中的程式語言是這樣的 所有的類不可以直接暴露任何方法,例如下面的 是錯誤的。classa a new classa error 不能以類的方法定義變數。a.do error ...

新聲一代享自由 JBL全新一代FREE測評

自分離式腔體的耳機首次推出之後,真無線耳機的風潮席捲世界。很明顯真無線耳機讓使用者體驗到了耳機與身體一體而行的自由體驗,觀感體驗可謂是顛覆性的。在風潮引領之下,jbl在 2017 年末推出了第一款真無線耳機free過後,在 2018 年 9 月又推出了這款耳機的公升級版 jbl全新一代free真無線...