Monaco-editor使用指南，遇到问题详解

由于项目演进，codemirror已经不能满足，需要更强大的json和sql编辑器，经过多方筛选，最终选择了Monaco-editor。

基本使用

"monaco-editor": "0.21.3", //由于我们需要json的注释功能，所以选择了21版本的包
"monaco-editor-webpack-plugin": "2.1.0"   //配合上边的版本

import * as monaco from "monaco-editor";
import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql"

初始化对象

<div id="monaco" style="height: 400vh; width: 50vw"></div>

this.monacoEditor = monaco.editor.create(document.getElementById("monaco"),
          {
            language: `sql`, //设置语言 
            value: `CREATE TABLE dbo.EmployeePhoto`,
            foldingImportsByDefault: true,
            foldingStrategy: "indentation", // 代码可分小段折叠
            theme: "vs-dark", //主题
            scrollbar: {
              verticalScrollbarSize: 8,
              horizontalScrollbarSize: 8,
            },
            minimap: {   //是否需要缩略图
              enabled: true,
            },
            autoIndent: true, // 自动布局
            automaticLayout: false, // 自动布局
            formatOnPaste: true, //是否粘贴自动格式化
            renderValidationDecorations: "on",
          }
        );

增加高亮

这里需要引入你需要的语言包

import "monaco-editor/esm/vs/language/json/monaco.contribution";
import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution";

自定义提示

import completion from "./components/complete";  //导入自定义提示

complete.js如下

export default [  
    
    /**   * 内置函数   */  
    {    
       label: '_ABS(val:number)',
       kind: monaco.languages.CompletionItemKind.Function,
       insertText: '_ABS(${1:val})',
       insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
       detail: '返回指定参数的绝对值'
     },  {    
       label: '_COS(val:number)',
       kind: monaco.languages.CompletionItemKind.Function,
       insertText: '_COS(${1:val})',
       insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
       detail: '求指定角度的余弦值'
     }
   ]

kind为枚举类型，可根据自定义提示类型选择，可选值有 Function、Keyword、Text、Method、Event、Operator、Unit、Value、Constant、Enum、Color等

 if(!monaco.languages.registerCompletionItemProvider['sql']){ //这里为了防止提示展示多次
          monaco.languages.registerCompletionItemProvider("sql", {
            provideCompletionItems: (model,position) => {
             monaco.languages.registerCompletionItemProvider['sql'] = true
              var textUntilPosition = model.getValueInRange({startLineNumber:position.lineNumber,
               startColumn: 1,
               endLineNumber: position.lineNumber,
               endColumn: position.column,
             })
             const match = textUntilPosition.match(/(\S+)$/)
             const suggestions =[]
             let tmp = [...completion]
             tmp.forEach((item)=>{
               if(item.label.indexOf(match[0].toUpperCase())!==-1){
                   suggestions.push({...item})
                 }
             })
             const keys = ['keywords','operators','builtinFunctions']
             keys.forEach((v)=>{
               sqlLanguage[v].forEach((item)=>{ //sqlLanguage通过引入 ，可以获取到当前语言的关键字和操作和内置函数等
                 if(item.indexOf(match[0].toUpperCase())!==-1){
                   suggestions.push({
                     label:item.toLowerCase(),
                     kind:monaco.languages.CompletionItemKind.Keyword,
                     insertText:item.toLowerCase()
                   })
                 }
               })
             })
             return { suggestions: suggestions};
           },
         });
        }

QQ录屏20230215171945

自定义主题

我这里是在vs-dark的基础上定义的主题配色

monaco.editor.defineTheme('tech',{
   base:'vs-drak',
   inherit:true,
   rules:[{background:'#081641'}],
   colors:{
     // 相关颜色属性配置
     'editor.background':'#081641',
      // "editor.foreground': '#0eeeeg'
      // "editor.lineHighlightBackground': "#0e0FF20.
      // 'editorLineNumber.foreground':#998899
      // 'editor.selectionBackground': "#88000030"
      // "editor.inactiveSelectionBackground": "#88000015
   }
})

效果图如下
图上是json的效果,格式化和注释以及报错的效果。