Vue2中安装使用MonacoEditor(自定义语法,自定义高亮，自定义提示)

1.安装MonacoEditor

cnpm install -S [email protected]
cnpm install -S [email protected]
cnpm install -S [email protected]

2.配置vue.config.js文件

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
        new MonacoWebpackPlugin()
    ]
}

3.建立组件monaco.vue

 4.建立语法提示文件sql.js

export default [
  /**   * 内置函数   */
  {
     label: 'if',//触发提示的文本
     kind: monaco.languages.CompletionItemKind.Function,
     insertText: `\n#if()\n\t\n #end`,//补全的文本
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     detail: '流程控制'
   },  {
     label: 'if/else',
     kind: monaco.languages.CompletionItemKind.Function,
     insertText: '\n#if()\n\n #else\n\n #end',
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     detail: '流程控制'
   }
 ]

 5.父组件引入monaco.vue

完事，不懂留言，看到会解答

Vue3+Vite+ElementPlus中安装使用MonacoEditor(自定义语言,自定义高亮，自定义鼠标悬浮提示，自定义工具栏)_前端程序猿i的博客-CSDN博客