介紹

說起`monaco-editor` 可能大半部分人都沒用過，但是說起vsCode我相信大部分前端都多多少少用過吧，說白了這玩意就是vscode的同胞兄弟，很久以前 微軟公司有個叫 Monaco Workbench的專案，後來這個專案一部分發展為了vsCode 也就是你們現在寫程式碼摸魚用的這個編輯器，另一部分就是現在這個monaco-editor，因為是和vsCode一樣，都是從同一個專案衍生出來的專案，所以互動，程式碼都有非常相似之處，說白了就是個web版本的vsCode。  

安裝

1.安裝依賴
npm install monaco-editor或者yarn add monaco-editor

2.修改webPack

老vue用webpack.base.conf.js，新vue用vue.config.js ps: vue3.0的還沒做過咋整不知道。
js const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { ... plugins: [ ... new MonacoWebpackPlugin() ] };

使用說明

1. 選一個標籤作為編輯器渲染的節點
   <div id="container"></div> <!--寬高自行設定 --> 注意！！！ 必須設定寬高！！

2.引入monaco

  import * as monaco from 'monaco-editor';
  export default{
    data(){
        return {
            editor:null,//文字編輯器
        }
    },
    mounted(){
      this.initEditor();  
    },
    methods:{
        initEditor(){
            // 初始化編輯器，渲染DOM
            this.editor = monaco.editor.create(document.getElementById('container'), {
                value:'',//編輯器初始顯示文字 也是編輯器的繫結值
                language:'sql',//支援的語言
                automaticLayout: true,//是否開啟自動佈局
                theme:'vs-dark' //官方自帶三種主題vs 白色, hc-black 黑色, or vs-dark 非常黑
            });
        },
        getValue(){
            this.editor.getValue(); //獲取編輯器中的文字
        }
    }
  }
 

程式碼提示

  monaco.languages.registerCompletionItemProvider('sql', {
        provideCompletionItems: function (model, position) {
          // 獲取當前行數
          const line = position.lineNumber;

          // 獲取當前列數
          const column = position.column;
          // 獲取當前輸入行的所有內容
          const content = model.getLineContent(line)
          // 通過下標來獲取當前游標後一個內容，即為剛輸入的內容
          const sym = content[column - 2];
          var textUntilPosition = model.getValueInRange({
            startLineNumber: 1,
            startColumn: 1,
            endLineNumber: position.lineNumber,
            endColumn: position.column
          });
          var word = model.getWordUntilPosition(position);
          var range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn
          };
          //---------------------------------------------------
          //上面的程式碼僅僅是為了獲取sym，即提示符
          //---------------------------------------------------
          var suggestions = [];
          if (sym === "$") {
            //...
            //攔截到使用者輸入$，開始設定提示內容，同else中程式碼一致，自行拓展
          } else {
            //直接提示，以下為sql語句關鍵詞提示
            var sqlStr = [
                'SELECT', 'FROM', 'WHERE', 'AND',
              'OR', 'LIMIT', 'ORDER BY', 'GROUP BY',
              'LEFT', 'ON', 'if(){}', 'for(){}',
              'size', 'get()', 'substring', 'return'
            ];
            for (var i in sqlStr) {
              suggestions.push({
                label: sqlStr[i], // 顯示的提示內容
                kind: monaco.languages.CompletionItemKind['Function'], // 用來顯示提示內容後的不同的圖示
                insertText: sqlStr[i], // 選擇後貼上到編輯器中的文字
                detail: '', // 提示內容後的說明
                range: range
              });
            }
          }
          return {
            suggestions: suggestions
          };
        },
        triggerCharacters: ["$", ""]
      });