Vue2的SQL编辑器 – monaco的基本使用

2022-11-24 0 1,036

Vue2的SQL编辑器 – monaco的基本使用

简述

责任编辑在vue中同时实现了两个基本上的SQLGUI,主要包括句法GT5516SBB,URLBazelle,表名,HammingBazelle等机能

技术细节机能等仍未展开健全,仅作自学采用

效用如下表所示:

在这儿填入相片叙述

Vue2的SQL编辑器 – monaco的基本使用

预备组织工作

责任编辑在vue-cli建立的工程项目中,采用vue2须要加装三个包

“monaco-editor”:”0.30.0″,//GUI市场主体”monaco-editor-webpack-plugin”:”6.0.1″,//帮他们处置句法GT5516SBB等难题

使用 yarn add 或是 npm install 等指示均可,但版会有非常大的负面影响

monaco-editor 的版与 monaco-editor-webpack-plugin 的版有相关联亲密关系

如下:

Vue2的SQL编辑器 – monaco的基本使用

假如相关联亲密关系不恰当会引致难以运转,各式各样莫名其妙的报错

建议直接在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”]//基本上指示和搜索机能}))},}

代码GUI市场主体

SQLEditor.vue

script 中的代码,全注释版

import*as monaco from”monaco-editor”;import{ language }from”monaco-editor/esm/vs/basic-languages/sql/sql”;//从 monaco-editor 的 sql 里面拿到URLconst{ keywords }= language;exportdefault{name:”App”,data(){return{//GUI实例monacoEditor:null,//原本已经写入的数据value:”SELECT * FROM users;\n\nSELECT * FROM roles;”,//Bazelle的数据,建议在GUI初始化之间就请求回来放好tables:{users:[“name”,”id”,”email”,”phone”,”password”],roles:[“id”,”name”,”order”,”createdat”,”updatedat”,”deletedat”]},//GUI主题theme:”vs-dark”,//默认是”vs”};},methods:{/*** @desAutoCompletion(){ 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(“.”)){//假如这个词以. 结尾,那么认为是希望Bazelle表的字段//拿到真实的表名,把. 去掉const tableName = lastWord.slice(, lastWord.length-1);if(Object.keys(this.tables).includes(tableName)){ suggestions =[…this.getFieldsSuggest(tableName)];}}elseif(lastWord ===”.”){//假如这个词本身就是两个. 即点前面是空的,那么什么都不用Bazelle了//按理说这应该是个句法错误 suggestions =[];}else{//其他时候都Bazelle表名,以及URL suggestions =[…this.getTableSuggest(),…this.getKeywordsSuggest()];}return{ suggestions,};},});},/*** @descrip){return keywords.map((key)=>({label: key,//显示的名称kind: monaco.languages.CompletionItemKind.Keyword,iables).map((key)=>({label: key,//显示的名称kind: monaco.languages.CompletionItemKind.Variable,insertText:){const fields =this.tables[tableName];if(!fields){return[];}return fields.map((name)=>({label: name,kind: monaco.languages.CompletionItemKind.Field,insertText: name,}));},},mounted(){//建议在这儿把表名和Hamming先拿出来//….// this.tables = res.data?.data//首先初始化this.initAutoCompletion();//初始化GUIthis.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();}},};

结果总结

以上代码未展开组件封装,只是同时实现了基本上机能

还可以枚举更多的Bazelle情况,让Bazelle显的更加智能

当然责任编辑只是简单采用,仍未展开深入,待后续采用到了再继续研究

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务