一. 文件調(diào)用示例

1. 安裝package包 官方文檔

"monaco-editor": "^0.28.1",
"monaco-editor-webpack-plugin": "^4.2.0",

請注意安裝包的版本號

2.配置vue.coinfig.js

在vue.coinfig.js中增加如下配置：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  lintOnSave: false,  
  configureWebpack: {
    plugins: [
      // 配置JS在線代碼編輯器monaco-editor的輔助文件
      new MonacoWebpackPlugin(),
    ],
  },
};

3. 調(diào)用示例

import * as monaco from 'monaco-editor';
export default {
  
  data() {
    return {
      monacoEditor: null, // 語言編輯器
    }
  },

  mounted(){
    this.init()
  },

  methods: {
    init(){
      if(this.$refs.codeContainer){
        // 初始化編輯器，確保dom已經(jīng)渲染
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
            value: '', // 編輯器初始顯示文字
            language: 'json', // 語言
            automaticLayout: true, // 自動布局
            theme: 'vs', // 官方自帶三種主題vs, hc-black, or vs-dark
            minimap: { // 關(guān)閉小地圖
              enabled: false,
            },
            lineNumbers: 'off', // 隱藏控制行號
        });
      }
    }
  }
}

.coder-editor{
  width: 100%;
  height: 160px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

二. 屬性說明

{
    value: '', // 編輯器初始顯示文字
    language: 'javascript', // 語言javascript | json
    automaticLayout: true, // 自動布局
    theme: 'vs', // 官方自帶三種主題vs, hc-black, or vs-dark
    foldingStrategy: 'indentation', // 代碼可分小段折疊
    overviewRulerBorder: false, // 不要滾動條的邊框
    lineNumbers: 'off', // 控制行號的出現(xiàn)on | off
    scrollbar: { // 滾動條設(shè)置
      verticalScrollbarSize: 4, // 豎滾動條
      horizontalScrollbarSize: 6, // 橫滾動條
    },
    readOnly: false, // 是否只讀 Defaults to false | true
    minimap: { // 關(guān)閉小地圖
      enabled: false,
    },
    cursorStyle: 'line', // 光標樣式
    automaticLayout: false, // 自動布局
    fontSize: 14, // 字體大小
    tabSize: 2, // tab縮進長度
    autoIndent: true, // 自動布局
}

支持的語言類型

在項目的node_modules/monaco-editor/min/vs/basic-languages目錄下能看到支持的語言類型：

三. 常用事件

銷毀編輯器

this.monacoEditor.dispose();

實時獲取編輯器的值

this.monacoEditor.onDidChangeModelContent(() => {
  this.monacoEditor.getValue() // 獲取編輯器中的語句
})

設(shè)置編輯器的值

this.monacoEditor.setValue(newValue)

其它事件

editor.setValue('console.log("Hello world!");');    //設(shè)置值
editor.getValue();  //獲取值

editor.getSelection();  //獲取選中的行信息

editor.getModel().getLineContent(1);    //獲取某一行的內(nèi)容
editor.getModel().getLinesContent();    //獲取每一行的內(nèi)容

monaco.editor.setTheme('vs-dark');      //設(shè)置主題

editor._configuration._rawOptions.language  //獲取編輯器當前語言（初始化值）
editor.getModel().getLanguageId()           //動態(tài)（已改變編輯器語言）

//改變屬性
editor.updateOptions({
　　//關(guān)閉行號
　　lineNumbers: "off"
});

//內(nèi)容改變事件
editor.onDidChangeModelContent(function(e){
　　console.log(e);
　　console.log(editor.getValue());
});

//添加按鍵監(jiān)聽
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {
　　console.log('Ctrl + S 保存')
})

editor.trigger('a', 'editor.action.formatDocument') //觸發(fā)：格式化文檔，更多支持項：editor._actions

//渲染代碼得到HTML
monaco.editor.colorize('console.log("Hello world!");', 'javascript').then(function (data) {
    console.log(data);
});

//渲染節(jié)點代碼
console.log("Hello world!");
monaco.editor.colorizeElement(document.getElementById('code'));