Vue 引入代碼代碼編輯器monaco-editor並自定義語法提示

介紹

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

安裝

1.安裝依賴
npm install monaco-editor或者yarn add monaco-editor怎么裝，選你開心的就好
npm install monaco-editor-webpack-plugin 或者 yarn add monaco-editor-webpack-plugin 這個必須安裝，不然跑不起來

2.修改webPack

老vue用webpack.base.conf.js，新vue用vue.config.js ps: vue3.0的還沒做過咋整不知道。

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: ["$", ""]
      });