vue中实现Monaco Editor自定义提示功能

npm install monaco-editor --save

<div id="monaco" class="monaco-editor"></div>

import * as monaco from 'monaco-editor';
this.fileEditor = this.monaco.editor.create(document.getElementById('monaco'), {
 value: null,
 language: 'sql' // 这里以sql为例
})

this.fileEditor.dispose(); // 使用完后销毁

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

this.monaco.languages.registerCompletionItemProvider('sql', { // 这里以sql语言为例
 provideCompletionItems () {
  return [{
   label: '${_DB', // 显示的提示内容
   kind: this.monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标
   insertText: '{_DB', // 选择后粘贴到编辑器中的文字
   detail: '' // 提示内容后的说明
  }];
 },
 triggerCharacters: ['$'] // 触发提示的字符，可以写多个
});

['json', 'yaml', 'php', 'go', 'sql', 'java', 'markdown', 'plaintext'].map(item => {
 this.monaco.languages.registerCompletionItemProvider(item, {
  provideCompletionItems () {
   return [{
    label: '${_DB',
    kind: this.monaco.languages.CompletionItemKind['Function'],
    insertText: '{_DB',
    detail: ''
   }];
  },
  triggerCharacters: ['$']
 });
});

this.monaco.languages.registerCompletionItemProvider(item, {
 provideCompletionItems (model, position) {
  // 获取当前行数
  const line = position.lineNumber
  
  // 获取当前列数
  const column = position.column
  
  // 获取当前输入行的所有内容
  const content = model.getLineContent(line)
  
  // 通过下标来获取当前光标后一个内容，即为刚输入的内容
  const sym = content[column - 2]
  
  if (sym === '$') {
   return [{
    label: '${_DB',
    kind: this.monaco.languages.CompletionItemKind['Function'],
    insertText: '{_DB',
    detail: ''
   }];
  }
  
  return [{
   label: ':abb',
   kind: this.monaco.languages.CompletionItemKind['Function'],
   insertText: 'abb',
   detail: ''
  },
  {
   label: ':bc',
   kind: this.monaco.languages.CompletionItemKind['Function'],
   insertText: 'bc',
   detail: ''
  }];
 },
 triggerCharacters: ['$', ':']
});