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()
]
};

使用说明

选一个标签作为编辑器渲染的节点
<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: ["$", ""]
      });