monaco-editor 实现SQL编辑器

安装

yarn add monaco-editor
或
npm install monaco-editor

在线demo地址 >>>
长期更新文档地址 >>>

配置

看网上的教程需要添加vite配置，但是我的项目没有对vite进行配置，打包出来的也是可以用的，具体看你们的场景

vite.config.js配置

安装 vite-plugin-monaco-editor

import monacoEditorPlugin from 'vite-plugin-monaco-editor'

plugins: [
  monacoEditorPlugin({
   
    languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
  }),
]

页面使用

先把对应的几个 worker 引入下，不然控制台会有警告。这段代码可以单独放在一个组件里面引入到当前页面，因为它目前的作用就是解决控制台警告的，写在当前页面也是没问题的

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';


self.MonacoEnvironment = {
   
  getWorker(workerId, label) {
   
    if (label === 'json') {
   
      return new jsonWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
   
      return new tsWorker();
    }
    if (label === 'html') {
   
      return new htmlWorker();
    }
    return new editorWorker();
  }
};

导入monaco模块准备初始化编辑器

import * as monaco