VueVue2的SQL编辑器 - monaco的基本使用vue怎么开始录制不了一篇读懂，

概述

本文在vue中实现了一个基本的Sql编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能

细节功能等尚未进行完善，仅作学习使用

效果如下：

在这里插入图片描述

准备工作

本文在vue-cli创建的项目中，使用vue2需要安装两个包

"monaco-editor":"0.30.0",//编辑器主体"monaco-editor-webpack-plugin":"6.0.1",//帮我们处理语法高亮等问题

使用 yarn add 或者 npm install 等命令均可，但是版本会有很大的影响

monaco-editor 的版本与 monaco-editor-webpack-plugin 的版本有对应关系

如下：

如果对应关系不正确会导致无法运行，各种莫名其妙的报错

建议直接在package.json 文件里面添加上面的固定版本依赖项

先处理 monaco-editor-webpack-plugin

在 vue.config.js 中添加

//把 monaco webpack plugin 搞进去constMonacoWebpackPlugin=require(monaco-editor-webpack-plugin);module.exports={configureWebpack:config=>{ config.plugins.push(newMonacoWebpackPlugin({languages:["sql"],//目前只处理SQL语言features:["coreCommands","find"]//基本命令和搜索功能}))},}

代码编辑器主体

SQLEditor.vue

script 中的代码，全注释版

import*as monaco from"monaco-editor";import{ language }from"monaco-editor/esm/vs/basic-languages/sql/sql";//从 monaco-editor 的 sql 里面拿到关键字const{ keywords }= language;exportdefault{name:"App",data(){return{//编辑器实例monacoEditor:null,//原本已经写入的数据value:"SELECT * FROM users;\n\nSELECT * FROM roles;",//补全的数据，建议在编辑器初始化之间就请求回来放好tables:{users:["name","id","email","phone","password"],roles:["id","name","order","createdat","updatedat","deletedat"]},//编辑器主题theme:"vs-dark",//默认是"vs"};},methods:{/*** @description:获取编辑器中填写的值*/getValue(){returnthis.monacoEditor.getValue();},/*** @description:初始化自动补全*/initAutoCompletion(){ monaco.languages.registerCompletionItemProvider("sql",{//触发提示的字符triggerCharacters:[".","",...keywords],provideCompletionItems:(model, position)=>{let suggestions =[];//行号，列号const{ lineNumber, column }= position;//光标之前的所有字符，即从这一行的0 到当前的字符const textBeforePointer = model.getValueInRange({startLineNumber: lineNumber,startColumn:,endLineNumber: lineNumber,endColumn: column,});// trim()取消两边空格，保证拆分出来前后都不是空值//\s是指空白，包括空格、换行、tab缩进等所有的空白const words = textBeforePointer.trim().split(/\s+/);//最后的一个有效词const lastWord = words[words.length-1];if(lastWord.endsWith(".")){//如果这个词以. 结尾，那么认为是希望补全表的字段//拿到真实的表名，把. 去掉const tableName = lastWord.slice(, lastWord.length-1);if(Object.keys(this.tables).includes(tableName)){ suggestions =[...this.getFieldsSuggest(tableName)];}}elseif(lastWord ==="."){//如果这个词本身就是一个. 即点前面是空的，那么什么都不用补全了//按理说这应该是个语法错误 suggestions =[];}else{//其他时候都补全表名，以及关键字 suggestions =[...this.getTableSuggest(),...this.getKeywordsSuggest()];}return{ suggestions,};},});},/*** @description:获取关键字的补全列表* @tips: CompletionItemKind 的所有枚举可以在monaco.d.ts 文件中找到，有二十多个，取需即可*/getKeywordsSuggest(){return keywords.map((key)=>({label: key,//显示的名称kind: monaco.languages.CompletionItemKind.Keyword,insertText: key,//真实补全的值}));},/*** @description:获取表名的补全列表*/getTableSuggest(){returnObject.keys(this.tables).map((key)=>({label: key,//显示的名称kind: monaco.languages.CompletionItemKind.Variable,insertText: key,//真实补全的值}));},/*** @description:根据表名获取字段补全列表* @param {*} tableName */getFieldsSuggest(tableName){const fields =this.tables[tableName];if(!fields){return[];}return fields.map((name)=>({label: name,kind: monaco.languages.CompletionItemKind.Field,insertText: name,}));},},mounted(){//建议在这里把表名和字段名先拿出来//....// this.tables = res.data?.data//首先初始化this.initAutoCompletion();//初始化编辑器this.monacoEditor= monaco.editor.create(document.getElementById("code-editor"),{value:this.value,//初始文字language:"sql",//语言readOnly:false,//是否只读automaticLayout:true,//自动布局theme:this.theme,// vs hc-black vs-darkminimap:{enabled:false,//关闭小地图},tabSize:2,// tab缩进长度fontSize:16,//文字大小});},beforeDestroy(){//销毁之前把monaco的实例也销毁了，不然会多次注册if(this.monacoEditor){this.monacoEditor.dispose();}},};

结果总结

以上代码未进行组件封装，只是实现了基本功能

还可以枚举更多的补全情况，让补全显的更加智能

当然本文只是简单使用，尚未进行深入，待后续使用到了再继续研究