<!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 = '--- ' + 'json: ' + '- rigid ' + '- better for data interchange ' + 'yaml: ' + '- slim and flexible ' + '- better for configuration ' + 'object: ' + ' key: value ' + ' array: ' + ' - null_value: ' + ' - boolean: true ' + ' - integer: 1 ' + 'paragraph: | ' + ' Blank lines denote ' + ' paragraph breaks ' + 'content: |- ' + ' Or we ' + ' can auto ' + ' convert line breaks ' + ' 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>