monaco-editor编辑器实现数据提示功能

先上图看效果

 输入 "." 的时候编辑器会提示出下一段的数据

我们前台的项目技术：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里传给前台即可