codemirror+js-yaml实现YAML格式的文本编辑器以及校验YAML格式是否符合规范的实现

简介: codemirror+js-yaml实现YAML格式的文本编辑器以及校验YAML格式是否符合规范的实现

需求背景是有个功能需要维护YAML文本格式的配置,实现思路是通过codemirror实现文本编辑器,通过js-yaml做类型转换和格式校验的工作。

首先请自行安装两个依赖库:npm install js-yaml codemirror,安装完以后,直接上vue代码,运行访问该vue的页面即可看到效果

<template><divclass="app-container"><el-card><divclass="json-editor"><textarearef="textarea"/></div><divstyle="text-align: left;margin-top:5px;"><el-buttontype="primary"@click="confirm">创建</el-button><el-buttontype="danger"@click="cancelButton">取消</el-button></div></el-card></div></template><script>importCodeMirrorfrom"codemirror";
import"codemirror/addon/lint/lint.css";
import"codemirror/lib/codemirror.css";
import"codemirror/theme/rubyblue.css";
import"codemirror/mode/yaml/yaml";
import"codemirror/addon/lint/lint";
import"codemirror/addon/lint/yaml-lint";
importYAMLfrom'js-yaml';
window.jsyaml=require("js-yaml");
exportdefault {
name: "ConfigYaml",
props: [],
components: {},
data() {
return {
value:'',
validationErrors:[],
yamlEditor: false    };
  },
mounted(){
// CodeMirror的配置项,搜官网看这里的配置项配置this.yamlEditor=CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true, // 是否显示行数mode: "text/x-yaml",  // 接受的类型,json xml....gutters: ["CodeMirror-lint-markers"], // 样式的宽度theme: "rubyblue", // 主题lint: true    });
this.value=`apiVersion: v1kind: Podmetadata:namespace: namespace1name:`;
this.yamlEditor.setValue(this.value);
this.yamlEditor.on("change", cm=> {
//   this.$emit("changed", cm.getValue());// 编辑json框里面的内容可以时刻监听到值,通过cm.getValue()获取到    });
  },
created() {
  },
activated() {
  },
methods: {
confirm(){
console.log(this.yamlEditor.getValue())
this.validateYaml(this.yamlEditor.getValue());
if (this.validationErrors.length==0) {
console.log('YAML格式有效');
      } else {
console.log('YAML格式无效');
console.log(this.validationErrors);
      }
    },
validateYaml(yamlData) {
try {
letdata=YAML.load(yamlData);
this.validationErrors=this.validateFields(data);
      } catch (error) {
console.error(error);
this.validationErrors= ['Invalid YAML format'];
      }
    },
validateFields(yamlData) {
constrequiredFields= ['metadata.name']; // 替换为所需的字段名consterrors= [];
console.log(yamlData)
for (constfieldofrequiredFields) {
if (!this.hasProperty(yamlData,field)) {
errors.push(`Missing field: ${field}`);
        } elseif (!this.getValueByPath(yamlData,field)) {
errors.push(`Empty value for field: ${field}`);
        } 
      }
returnerrors;
    },
getValueByPath(obj, path) {
constproperties=path.split('.');
letvalue=obj;
for (constpropertyofproperties) {
if (value.hasOwnProperty(property)) {
value=value[property];
        } else {
returnundefined;
        }
      }
returnvalue;
    },
hasProperty(obj, propertyPath) {
constproperties=propertyPath.split('.');
letcurrentObj=obj;
for (constpropertyofproperties) {
if (!currentObj.hasOwnProperty(property)) {
returnfalse;
        }
currentObj=currentObj[property];
      }
returntrue;
    },
cancelButton(){
this.$store.dispatch("tagsView/delView", this.$route).then(() => {
this.$router.push({ name: "xxx" });
      });
    },
  }
};
</script><stylescoped>.json-editor {
height: 500px;
position: relative;
}
.json-editor >>> .CodeMirror {
height: 500px;
min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll {
min-height: 300px;
}
.json-editor >>> .cm-s-rubybluespan.cm-string {
color: #f08047;
}
</style><stylelang="less"scoped>.floatdiv{
float: left;
}
.timeUintDiv{
line-height: 30px;
margin-left: 5%;
}
::v-deep.divInSelect.el-input__inner {
border: none;
box-shadow: none;
}  
</style>

cancelButton是关闭操作,暂时不用关心,各自根据各自的需求做调整,主要是初始化this.value到yamlEditor文本编辑器中,该编辑器由于js-yaml的加持,就带有了YAML文本格式是否规范的校验,然后点击创建的时候,会去判断是否包含业务层需要的属性,比如 const requiredFields = ['metadata.name']; // 替换为所需的字段名 这段描述,可以改为自己的必填字段,这个地方可以从数据库读,放置在该地方欠妥当,可以放到data里。紧接着就是判断是否含有该字段,以及该字段有没有值,主要是两个函数hasProperty和getValueByPath,支持循环深入判断,运行结果如下几张图:

1.png2.png3.png4.png

上述测试情况分别对应的是成功,格式有误,metadata.name字段不存在,metadata.name字段的值为空。可以根据业务进一步扩展校验规则,以及提示的方式。

目录
相关文章
|
21天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
22天前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
28 1
|
17天前
|
XML JSON Kubernetes
什么是 YAML?:一种简洁高效的数据序列化格式
什么是 YAML?:一种简洁高效的数据序列化格式
50 0
|
3月前
|
JavaScript 前端开发
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式,用于校验IPv4地址的有效性,包括支持CIDR表示法的变体。
84 4
|
3月前
|
XML Java C语言
yaml语法格式,springboot中yaml的使用
本文介绍了YAML的语法格式和数据类型表示方法,并详细讲解了如何在Spring Boot中使用YAML,包括@ConfigurationProperties注解及Bean的创建、编写Controller、配置application.yaml配置文件,以及在pom.xml中开启YAML提示。
|
3月前
|
XML JSON JavaScript
js的json格式
js的json格式
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
36 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
148 1
前端JS正则校验密码之3种实现方式
|
3月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
4月前
|
JavaScript
将jq转为原生js格式
将jq转为原生js格式
39 2