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