monaco-editor+vue2+ts实现sql编辑器

1.简介

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。目前无可读的中文文档。官网为api和案例。
官网：monaco-editor
github：monaco-editor|github|

2.实现

安装：npm i monaco-editor; // 我使用版本：0.30.1
npm i sql-formatter; // 我使用版本：10.7.2
npm i monaco-editor-webpack-plugin // 我使用版本：6.0.0
如有报错建议更换版本；

import { format } from 'sql-formatter';
import * as monaco from 'monaco-editor';

// 初始化
	init() {
		const _this = this;
		this.monacoEditor = monaco.editor.create(
			this.$refs.sqlCompiler as HTMLElement,
			{
				value: this.code,
				readOnly: this.readOnly, // 是否只读（true：不可编辑，false：可编辑）
				language: 'sql', // 语言
				theme: 'vs', // 主题
				tabSize: 2,
				scrollBeyondLastLine: false,
				automaticLayout: true, // 自动布局
				minimap: {
					// 关闭代码缩略图
					enabled: false, // 是否启用预览图
				},
				codeLensFontSize: 14, // codeLens的字体大小
			}
		);
	// 代码补全提示
	monaco.languages.registerCompletionItemProvider('sql', {
			provideCompletionItems: function (model, position) {
				let suggestions = [] as any[];
				const { lineNumber, column } = position;
				const textBeforePointer = model.getValueInRange({
					startLineNumber: lineNumber,
					startColumn: 0,
					endLineNumber: lineNumber,
					endColumn: column,
				});
				 sqlLanguage.keywords.forEach((item) => {
				 	suggestions.push({
				 		label: item,
				 		kind: monaco.languages.CompletionItemKind.Keyword,
				 		insertText: item,
				 	});
				 });
				 sqlLanguage.operators.forEach((item) => {
				 	suggestions.push({
				 		label: item,
				 		kind: monaco.languages.CompletionItemKind.Operator,
						insertText: item,
				 	});
				 });
				 sqlLanguage.builtinFunctions.forEach((item) => {
				 	suggestions.push({
				 		label: item,
				 		kind: monaco.languages.CompletionItemKind.Function,
				 		insertText: item,
				 	});
				});
				 sqlLanguage.builtinVariables.forEach((item) => {
				 	suggestions.push({
				 		label: item,
				 		kind: monaco.languages.CompletionItemKind.Variable,
				 		insertText: item,
				 	});
				 });
				return {
					suggestions: suggestions,
				};
			},
				// 自定义主题
		monaco.editor.defineTheme('customTheme', {
			base: 'vs',
			inherit: true,
			rules: [{ background: '#f6f6f6', token: '' }],
			colors: {
				'editor.background': '#f6f6f6', //编辑视口背景色
				'editor.lineHighlightBackground': '#1890FF14', //高亮行背景色
			},
		});
		//设置自定义主题
		monaco.editor.setTheme('customTheme');

		// 监听内容变化
		this.monacoEditor.onDidChangeModelContent((e) => {});
			// 监听失去焦点事件
		this.monacoEditor.onDidBlurEditorText((e) => {});
		}
		destroyEditor() {
		// 销毁编辑器
		this.monacoEditor.dispose();
	}
	//获取值
	getValue() {
		return this.monacoEditor.getValue();
	}
	//设置值
	setValue(val) {
		this.monacoEditor.setValue(val);
	}
	// 自动格式化sql代码，需要引入sql-formatter工具
	format(needValue) {
		this.clearMistake();
		try {
			this.monacoEditor.setValue(
				format(this.monacoEditor.getValue(), { language: 'sql' })
			);
		} catch (e: any) {
			// 错误提示
			const { message } = e;
			const list = message.split(' ');
			const line = list.indexOf('line');
			const column = list.indexOf('column');
			this.markMistake(
				{
					startLineNumber: Number(list[line + 1]),
					endLineNumber: Number(list[line + 1]),
					startColumn: Number(list[column + 1]),
					endColumn: Number(list[column + 1]),
				},
				'Error',
				message
			);
		}
		if (needValue) {
			return this.monacoEditor.getValue();
		}
	}
	// 光标处插入内容
	insertContent(text: string) {
		const position = this.monacoEditor.getPosition();
		const insertText = text;
		this.monacoEditor.executeEdits('', [
			{
				range: new monaco.Range(
					position.lineNumber,
					position.column,
					position.lineNumber,
					position.column
				),
				text: insertText,
			},
		]);
		// 设置新的光标位置
		try {
			this.monacoEditor.setPosition(
				position.lineNumber,
				position.column + insertText.length
			);
		} catch {}

		// 聚焦
		this.monacoEditor.focus();
	}

插件配置

// vue.config.js
const vueConfig = {
	publicPath: process.env.BASE_URL || '/',
	configureWebpack: {
		// webpack plugins
		plugins: [
		// 新增解析sql格式化的插件
			new MonacoWebpackPlugin({
				languages: ['sql'],
				features: ['coreCommands', 'find'],
			}),
		],
		externals: {},
	},
	}

实现效果：

完整代码地址：monaco-editor实现sql编辑器