monaco-editor编辑器实现数据提示功能
这一套用来实现最终效果对传入的数据是有格式要求的!我们前台的项目技术:vue + element UI。输入 "." 的时候编辑器会提示出下一段的数据。以上数据存在list里传给前台即可。
·
先上图看效果
输入 "." 的时候编辑器会提示出下一段的数据
我们前台的项目技术:vue + element UI
本质:本质上就是在一个集合中过滤出符合条件的数据
注:以下内容有参照其他博主
<template>
<div class="the-code-editor-container" ref="container"></div>
</template>
<script>
import * as monaco from "monaco-editor";
var i = 0;
var res = [];
var sqlStr = "";
export default {
name: "codeEditor",
props: {
options: {
type: Object,
default() {
return {
language: "sql", // shell、sql、python
readOnly: false, // 不能编辑
};
},
},
value: {
type: String,
default: "",
},
jsObj: {}, //传入的数据
},
watch: {},
data() {
return {
monacoInstance: null,
provider: null,
hints: [],
jstr: "",
};
},
created() {
// this.initHints();
//this.$emit("contentChange");
},
mounted() {
console.log("monaco--mounted");
this.init();
},
beforeDestroy() {
this.dispose();
},
methods: {
setDataValue(sqlContent) {
this.monacoInstance.getModel().setValue(sqlContent);
},
getdataValue() {
this.monacoInstance.getModel().setValue(this.value);
},
dispose() {
if (this.monacoInstance) {
if (this.monacoInstance.getModel()) {
this.monacoInstance.getModel().dispose();
}
this.monacoInstance.dispose();
this.monacoInstance = null;
if (this.provider) {
this.provider.dispose();
this.provider = null;
}
}
},
initHints() {
let sqlArr = this.jsObj;
this.hints = Array.from(new Set([...sqlArr])).sort();
},
init() {
let that = this;
this.dispose();
monaco.languages.registerCompletionItemProvider("sql", {
provideCompletionItems: function (model, position) {
// 获取当前行数
const line = position.lineNumber;
// 获取当前列数
const column = position.column;
// 获取当前输入行的所有内容
const content = model.getLineContent(line);
// 通过下标来获取当前光标后一个内容,即为刚输入的内容
const sym = content[column - 2];
var textUntilPosition = model.getValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
});
var word = model.getWordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn,
};
//---------------------------------------------------
//上面的代码仅仅是为了获取sym,即提示符
//---------------------------------------------------
var suggestions = [];
//sym是你最后一个输入编辑器的字符
if (sym === ".") {
//...
//拦截到用户输入$,开始设置提示内容,同else中代码一致,自行拓展
var val_arry = [];
that.jstr = "";
var key_list = that.jsObj;
val_arry = content.split(".");
if (val_arry[0] == "") {
that.jstr = "";
key_list.forEach((ele, index) => {
if (ele.value.split(".")[0].match(content) != null) {
that.jstr += ele.value.split(".")[0] + " ";
}
});
} else {
if (content.split(" ").length > 1) {
// console.log(
// content.split(" ").length,
// 'content.split("emsp").length 1'
// );
that.jstr = "";
var len =
content.split(" ")[content.split(" ").length - 1].split(".")
.length - 1;
key_list.forEach((ele, index) => {
if (
ele.value.indexOf(
content.split(" ")[content.split(" ").length - 1]
) != -1
) {
that.jstr += ele.value.split(".")[len] + " ";
}
});
} else {
// console.log(
// content.split(" ").length,
// 'content.split("emsp").length2 '
// );
that.jstr = "";
var len = content.split("emsp")[0].split(".").length - 1;
key_list.forEach((ele, index) => {
if (ele.value.indexOf(content) != -1) {
that.jstr += ele.value.split(".")[len] + " ";
}
});
}
}
var arr_list = that.jstr.split(" ");
sqlStr = arr_list.filter(function (item, index) {
return arr_list.indexOf(item) === index;
});
// var sqlStr = [
// 'SELECT', 'FROM', 'WHERE', 'AND',
// 'OR', 'LIMIT', 'ORDER BY', 'GROUP BY',
// 'LEFT', 'ON', 'if(){}', 'for(){}',
// 'size', 'get()', 'substring', 'return'
// ];
// for (var i in sqlStr) {
// suggestions=[];
// suggestions.push({
// label: sqlStr[i], // 显示的提示内容
// kind: monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标
// insertText: sqlStr[i], // 选择后粘贴到编辑器中的文字
// detail: 'data', // 提示内容后的说明
// range: range
// });
// }
} else {
// console.log(that.jstr, " that.jstr 1");
//直接提示,以下为sql语句关键词提示
that.jstr = "";
that.jsObj.forEach((ele, index) => {
if (ele.value.split(".")[0].match(sym) != null) {
that.jstr += " " + ele.value.split(".")[0];
}
});
var arr_list = that.jstr.split(" ");
sqlStr = arr_list.filter(function (item, index) {
return arr_list.indexOf(item) === index;
});
// var sqlStrs = [
// 'SELECT', 'FROM', 'WHERE', 'AND',
// 'OR', 'LIMIT', 'ORDER BY', 'GROUP BY',
// 'LEFT', 'ON', 'if(){}', 'for(){}',
// 'size', 'get()', 'substring', 'return'
// ];
}
console.log("sqlStr----", sqlStr);
for (var i in sqlStr) {
suggestions.push({
label: sqlStr[i], // 显示的提示内容
kind: monaco.languages.CompletionItemKind["Function"], // 用来显示提示内容后的不同的图标
insertText: sqlStr[i], // 选择后粘贴到编辑器中的文字
detail: "data", // 提示内容后的说明
range: range,
});
}
return {
suggestions: suggestions,
};
},
triggerCharacters: [".", ""],
});
// 初始化编辑器实例
this.monacoInstance = monaco.editor.create(this.$refs["container"], {
value: that.value,
theme: "vs-dark",
fontSize: "20px",
autoIndex: true,
...this.options,
});
// 监听编辑器content变化事件
this.monacoInstance.onDidChangeModelContent(() => {
this.$emit("contentChange", this.monacoInstance.getValue());
});
},
},
};
</script>
<style lang="scss" scope>
.the-code-editor-container {
height: auto;
width: auto;
overflow: hidden;
border: 1px solid #eaeaea;
.monaco-editor .scroll-decoration {
box-shadow: none;
}
}
</style>
这一套用来实现最终效果对传入的数据是有格式要求的!!!
//将json解析生成符合结构的数据
String json = "[{
"id": 217,
"class_id": "10",
"uniq_id": "689f57ce-4acd-424d-a321-a2d617986c42",
"child_url": "FETCH_API_BLFD3002API_ASYNC",
"api_name": "1",
"request_method": "get",
"request": [{
"tranName": false,
"tranValue": false,
"name": "",
"value": ""
}],
"api_notes": "FETCH_API_BLFD3002API_ASYNC",
"insert_time": "2022-05-05 19:43:41.0",
"insert_user": "xusg",
"update_time": "2022-05-05 19:43:41.0",
"update_user": "xusg",
"del_flg": "0"
}]";
解析类:
package com.linkstec.tad.rakuraku.common.utils;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.linkstec.tad.rakuraku.mapper.entity.DataCenterEntity;
import com.linkstec.tad.rakuraku.mapper.entity.FrtgCodesEntity;
import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;
import java.util.ArrayList;
import java.util.List;
@Component
public class FormatSQLJSONUtil {
public List<DataCenterEntity> getDataCenter(List<FrtgCodesEntity> codesList) {
List<DataCenterEntity> dataCenter = new ArrayList<>();
if(CollectionUtils.isEmpty(codesList)) return dataCenter;
for (FrtgCodesEntity codesEntity : codesList) {
String codeContent = codesEntity.getCodeContent();
String codeNm = codesEntity.getCodeNm();
if (StringUtils.isBlank(codeContent)) continue;
JSONArray ja = JSON.parseArray(codeContent);
String dataName = codeNm.substring(0, codeNm.lastIndexOf("."));
parseJSONArray(ja,dataCenter,dataName);
}
return dataCenter;
}
private void parseJSONArray(JSONArray ja,List<DataCenterEntity> dataCenter,String item){
for(int i = 0; i < ja.size(); i++){
DataCenterEntity entity = new DataCenterEntity();
String caption = item + "[" + i + "]";
entity.setCaption(caption).setValue(caption).setMeta("sqlData").setScore(1);
dataCenter.add(entity);
JSONObject jo = (JSONObject) ja.get(i);
parseJSONObject(jo,dataCenter,caption);
}
}
private void parseJSONObject(JSONObject jo,List<DataCenterEntity> dataCenter,String item){
for(String key : jo.keySet()){
DataCenterEntity entity = new DataCenterEntity();
String caption = item + "." + key;
entity.setCaption(caption).setValue(caption).setMeta("sqlData").setScore(1);
dataCenter.add(entity);
Object value = jo.get(key);
boolean objFlag = value instanceof JSONObject;
boolean arrFlag = value instanceof JSONArray;
if(objFlag){
JSONObject nextJo = (JSONObject) value;
parseJSONObject(nextJo,dataCenter,caption);
}else if(arrFlag){
JSONArray nextJa = (JSONArray) value;
parseJSONArray(nextJa,dataCenter,caption);
}
}
}
}
最后得到的数据结构(供参考):
createCgButton11SQLData[40].uniq_id
createCgButton11SQLData[40].update_user
createCgButton11SQLData[40].child_url
createCgButton11SQLData[40].class_id
createCgButton11SQLData[40].insert_time
createCgButton11SQLData[40].del_flg
createCgButton11SQLData[40].id
createCgButton11SQLData[40].request_method
createCgButton11SQLData[40].insert_user
createCgButton11SQLData[41]
createCgButton11SQLData[41].request
createCgButton11SQLData[41].update_time
createCgButton11SQLData[41].uniq_id
createCgButton11SQLData[41].update_user
createCgButton11SQLData[41].child_url
createCgButton11SQLData[41].class_id
createCgButton11SQLData[41].insert_time
createCgButton11SQLData[41].del_flg
createCgButton11SQLData[41].id
createCgButton11SQLData[41].request_method
createCgButton11SQLData[41].insert_user
createCgButton11SQLData[42]
createCgButton11SQLData[42].update_time
createCgButton11SQLData[42].uniq_id
createCgButton11SQLData[42].update_user
createCgButton11SQLData[42].child_url
createCgButton11SQLData[42].class_id
createCgButton11SQLData[42].insert_time
createCgButton11SQLData[42].del_flg
createCgButton11SQLData[42].id
createCgButton11SQLData[42].request_method
createCgButton11SQLData[42].insert_user
createCgButton11SQLData[43]
以上数据存在list里传给前台即可
更多推荐
已为社区贡献1条内容
所有评论(0)