<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://www.bejson.com/static/bejson/css/global.min.css?20200630" />
<link rel="stylesheet" type="text/css" href="http://www.bejson.com/static/bejson/css/indexCodeMirror.min.css" />
<!--两边数据同步 start -->
<script src="http://www.bejson.com/static/ydxyt/www.bejson.com.js"></script>
<!--两边数据同步 end -->
</head>
<body class="load-indicator" data-siteid="2">
<div class="container" style="margin-top: 50px">
<!--文本输入 start-->
<div class="yamleditor-box">
<div class="editor-box2" id="yamlEditor">
<div id="editor">
<textarea id="code"></textarea>
<div id="resize">
<i class="icon-bars"></i>
</div>
</div>
</div>
<div class="editor-box2">
<div id="editor2">
<textarea id="code2"></textarea>
<div id="resize2">
<i class="icon-bars"></i>
</div>
</div>
</div>
</div>
<!--文本输入 start-->
<!--校验结果提示 start-->
<div class="with-icon alert t-big-margin" id="jsonlintBox">
<i class="icon-info-sign" id="jsonlintIcon"></i>
<pre class="content" id="jsonlintResult">请贴入要格式化的ymal代码</pre>
</div>
<!--校验结果提示 end-->
</div>
<!--保留 start-->
<script src="http://www.bejson.com/static/bejson/js/global.min.js?v=20200630" type="text/javascript" charset="utf-8"></script>
<script src="http://www.bejson.com/static/bejson/js/indexCodeMirror.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.bejson.com/static/bejson/js/component/json2yaml/json2yaml.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//根据DOM元素的id构造出一个编辑器================================================================================================================================================================================================
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, //是否显示左边换行术字
lineWrapping: true, //是否折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
lineNumbers: true, //是否显示左边换行术字
lineWrapping: true, //是否折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
// 初始化编辑器内容
var yamlCon = '---\n' +
'json:\n' +
'- rigid\n' +
'- better for data interchange\n' +
'yaml:\n' +
'- slim and flexible\n' +
'- better for configuration\n' +
'object:\n' +
' key: value\n' +
' array:\n' +
' - null_value: \n' +
' - boolean: true\n' +
' - integer: 1\n' +
'paragraph: |\n' +
' Blank lines denote\n' +
' paragraph breaks\n' +
'content: |-\n' +
' Or we\n' +
' can auto\n' +
' convert line breaks\n' +
' to save space';
editor.setValue(yamlCon);
if (yamlCon) {
try{
var json = JSON.stringify(jsyaml.load(yamlCon), null, 2);
editor2.setValue(json);
$('#jsonlintResult').html("正确的yaml!");
$('#jsonlintBox').addClass('alert-success alert').removeClass('alert-warning alert-danger');
$('#jsonlintIcon').addClass('icon-ok-sign').removeClass('icon-info-sign icon-remove-sign');
} catch (e) {
document.getElementById("jsonlintResult").innerHTML = e;
$('#jsonlintBox').addClass('alert-danger alert').removeClass('alert-warning alert-success');
$('#jsonlintIcon').addClass('icon-remove-sign').removeClass('icon-info-sign icon-ok-sign');
}
} else {
document.getElementById("jsonlintResult").innerHTML = 'yaml代码不能为空';
$('#jsonlintBox').addClass('alert-danger alert').removeClass('alert-warning alert-success');
$('#jsonlintIcon').addClass('icon-remove-sign').removeClass('icon-info-sign icon-ok-sign');
}
</script>
<!--保留 end-->
</body>
</html>
