codemirror + json2yaml、yamljs配合渲染且校驗yaml文件

前言

最近有個需求是要將k8s格式的yaml文件進行渲染、編輯、校驗等一系列操作，那就需要在線編輯器、yaml校驗的插件，經過多個插件之間進行比較，最后選擇這三個codemirror + json2yaml、yamljs。

本文僅做最簡單的介紹和操作。

 

准備工作

命令行安裝三個插件

　　npm install --save codemirror

　　npm install --save json2yaml

　　npm install --save yamljs

當前文件按需引入

　　import YAML from 'json2yaml'

　　const getYAMLJS = require('yamljs')

 

codemirror用法

github下載codemirror包到本地，public文件夾下（地址：https://github.com/codemirror/CodeMirror）

在index.html按需引入文件

在頁面上，使用textarea承載codemirror

mounted方法中初始化codemirror，設置基本屬性

codemirror賦值及改變

賦值：this.myCodeMirror.setValue(dataVal)

獲取：this.myCodeMirror.getValue()

改變：this.myCodeMirror.on('change', (cm) => {})

 

json2yaml、yamljs用法

json2yaml

在我項目下，用來將yaml文件json對象形式轉為yaml字符串形式。（其實yamljs也是可以做到的，但是最開始用的這個插件，后面就沒換回來了）

yamljs

作用：將yaml文件字符串形式轉為對象形式。

這樣獲取的對象可以拿到里面的屬性及屬性值。

 

校驗yaml文件格式

檢驗yaml格式的話，建議在this.myCodeMirror.on('change', (cm) => {})方法下，回車時做校驗的。

 

最后的話

學無止境，要加油！！