1.簡(jiǎn)介
Monaco Editor是為VS Code提供支持的代碼編輯器。描述代碼編輯器的功能,良好的網(wǎng)頁(yè)是在這里。它已獲得MIT許可,并支持Classic Edge,Edge,Chrome,F(xiàn)irefox,Safari和Opera。移動(dòng)瀏覽器或移動(dòng)Web框架不支持Monaco編輯器(但移動(dòng)的有的瀏覽器是支持的,起碼我用的幾個(gè)都支持)。
2.開(kāi)始
2.1 安裝環(huán)境
npm install monaco-editor@0.21.2--save
開(kāi)始使用
新建vue文件,添加如下代碼即可使用
```
<divid="container"></div>
```
import*asmonacofrom'monaco-editor'exportdefault{data(){return{editor:null,//文本編輯器}},mounted(){this.initEditor();},methods:{initEditor(){// 初始化編輯器,確保dom已經(jīng)渲染this.editor=monaco.editor.create(document.getElementById('container'),{value:'',//編輯器初始顯示文字language:'sql',//語(yǔ)言支持自行查閱demoautomaticLayout:true,//自動(dòng)布局theme:'vs-dark'//官方自帶三種主題vs, hc-black, or vs-dark});},getValue(){this.editor.getValue();//獲取編輯器中的文本}}}