Vue3+Vite+ElementPlus中安装使用MonacoEditor(自定义语言,自定义高亮，自定义鼠标悬浮提示，自定义工具栏)

一、安装monaco-editor

cnpm i [email protected] -g
cnpm i [email protected] -D

二、在vite.config.js配置

import monacoEditorPlugin from "vite-plugin-monaco-editor"
export default defineConfig(({ mode, command }) => {
    plugins:[monacoEditorPlugin()],
})

三、封装monaco.vue

四、封装自定义补全sql.js文件

let LanguageArr = ['update()']//提示名和补全代码相同的可以写这里
let jsonArr = []
for (let i = 0; i < LanguageArr.length; i++) {
  jsonArr.push({
    label: LanguageArr[i],
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: LanguageArr[i],
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
    detail: LanguageArr[i]
  })
}
export default [
  //不相同的提示写这里
  {
    label: 'if',//提示名
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: `\n#if()\n\t\n #end`//补全代码
    ,
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
    detail: '流程控制'
  }
  ...jsonArr
]

五、父组件引入monaco.vue

有问题请留言，看到会及时回复

Vue中安装使用MonacoEditor(自定义语法,自定义高亮，自定义提示)_前端程序猿i的博客-CSDN博客