JSON エディタの実装 code_json

JSON データを入力または貼り付けて、それが正しいかどうかを確認できます。 Tab キーを押すと、全文が自動的にインデントされ、書式設定されます。

JSON エディター コア コード

コードをコピー コードは次のとおりです: /* メインオブジェクト */ JE={ データ:{ },/* 関連データ*/ code:false,/* フォーマットされたコード*/ oldCode:[],/* 過去のコード*/ editUI:null,/* 関連する編集ボックス */ msgUI:null,/* 情報表示ウィンドウ*/ treeUI:null,/* ツリーウィンドウ*/ name:'JE',/* インスタンス名*/ root:' ',/* ルートノードのタイトル*/ checkbox:0,/* チェックボックスを追加するかどうか*/ hot:null,/* ノードの選択*/ indent:' ',/*文字 't' または 4 ' ' をインデントします*/ firstUp:true,/*初めて自動的に更新します*/ onclick:Array,/*ツリーのクリック通知 */ countInfo:'',/*統計情報*/ formating:false,/* 整形（ツリーの再構築は禁止） */ ico:{/* ツリーアイコン*/ //フォルダー構造行 r0:'img?uuid=20166b3094daba4bc6e18817b8301b093a'、 r0c:'img?uuid=208018827ed877e31810e838d33e4ac2b0'、 r1:'uuid=20? 94c793496278bde84be80bb6cb2117f5'、 r1c ; 5bc8544cecd8b7f82fcdb'、 //プレフィックス画像 nl:'img?uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', //ファイル構造行 f1:'img?uuid= 202ccc63 9afd44130a3946e9837672479c', f2:'img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c ', root:'img?uuid=2069cf3fd1e53a2bb365 f771eac65b50a2', //フォルダー arr:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', arrc:' img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', obj:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', objc:'img?uuid= 20c34d1d5d5a4639061e08165c61a97e63', //ファイル arr2:' im g?uuid=20327500502b71ed0278a0cc1bf8f8bb41', obj2:'img ?uuid=203346cafeedac1fb7628bc886b9b7fb47' }, toTree:function(){/* コードのフォーマット中に JSON をツリー HTML に変換します*/ vardraw=[],This=this,ico=this.ico; JE.firstUp=false;/*最初の自動構築を完了*/ var Notice=function(prefix/*Prefix HTML*/, lastParent/*親が末尾ノードかどうか (アイコンが空白であることを確認してください | 構造 Line)*/,name /*ノード名*/,value/*ノード値*/,formObj/* 親がオブジェクトかどうか (子アイコンを決定します) */){/* 子ノードを構築します*/ var rl= prefix==''?ico.r0:lastParent?ico.r1:ico.r2;/* ルート ノード アイコンを構成します*/ if(value&&value.constructor==Array){/* 配列ノードを処理します*/ draw.push(' ',This.draw(prefix,rl,ico) .arr,name,''),' ');/* フォルダーの描画*/ for (var i=0;i notify (prefix This.img(lastParent?ico.nl:ico.vl),i==value.length- 1,i,value[i]); dl>'); }else if(value&&typeof value=='object'){/* オブジェクト ノードの処理*/ draw.push(' ',This.draw( prefix,rl,ico.obj,name,''),' ');/* フォルダーを描画します*/ var len=0,i=0; var key in value)len;/* オブジェクトのメンバーの総数を取得します*/ for(var key in value)notify(prefix This.img(lastParent?ico.nl:ico.vl), i==len ,key,value[key],true); draw.push(' '); }else{/* リーフノード (描画ファイル) を処理します */ draw.push(' ',This.draw(prefix,lastParent?ico .f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'&lt ;/dt> ); }; };/* Not [ ] または {} は描画しません */ if(typeof this.data=='object') {notify('',true,this.root,this.data);}; if(this.treeUI )this.treeUI.innerHTML=draw.join('');/* ツリーウィンドウに表示*/ this.msg('ツリー ビューが正常に構築されました!'); }, draw:function (prevfix,line,ico,name,value){/* 子 HTML コンストラクター*/ var cmd=false,J=this.ico,imgName=false; スイッチ (行) {//パス スイッチアイコン case J.r0:imgName='r0';break; :imgName='r1';break; case J.r2:imgName='r2'; } if(imgName)cmd=' onclick="' this.name '.show(this, '' imgName '')" ';/* 折りたたみコマンドを追加*/ var type=typeof name= ='string'?'(オブジェクトメンバー)':'(配列インデックス)'; return prevfix this .img(line,cmd) (this.checkbox?' ':'') this .img(ico) ' 'key ="' 名前 '" val="' 値 '" >' 名前の種類 (値== ''?'':' = ') 値 ' ' >img:function(src,attr){/* img HTML 構築*/ return ' }, click:function(item){/* サブ項目クリック統合コールバック */ if(this.hot)this.hot.className=''; .hot=item; this.hot.className='hot';/* 選択したアイテムを切り替える*/ this.onclick(item); format:function(txt,compress) /*圧縮モードかどうか*/){/* JSON ソース コードの形式 (JSON テキストに変換されたオブジェクト) */ if(/^s*$/.test(txt))return this.msg('Theデータは空なのでフォーマットできません! try{var data=eval('(' txt ')' );} catch(e){ JE.editUI.style.color='red'; return this.msg('数据源语法错误,格式化失败! 错误信息: '+e.description,'err'); }; JE.editUI.style.color='#000'; var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; var notify=function(name,value,isLast,indent/*缩进*/,formObj){ nodeCount++;/*节点计数*/ for (var i=0,tab='';i tab=compress?'':tab;/*压缩模式忽略缩进*/ maxDepth=++indent;/*缩进递增并记录*/ if(value&&value.constructor==Array){/*处理数组*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/ for (var i=0;i notify(i,value[i],i==value.length-1,indent,false); draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/ }else if(value&&typeof value=='object'){/*处理对象*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/ var len=0,i=0; for(var key in value)len++; for(var key in value)notify(key,value[key],++i==len,indent,true); draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/ }else{ if(typeof value=='string')value='"'+value+'"'; draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line); }; }; var isLast=true,indent=0; notify('',data,isLast,indent,false); this.countInfo='共处理节点 '+nodeCount+' 个,最大树深为 '+maxDepth+' '; return draw.join(''); }, msg:function(text,type){/* 编辑状态或者错误通知 */ if(!this.msgUI)return alert(text); with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&'); this.msgUI.innerHTML=' ['+now+'] '+text.replace(/\n/g,' ')+' '; this.msgUI.className=type; }, show:function (ico,id){/* ツリー ノードの表示と非表示*/ var subView=ico.parentNode。 parentNode .childNodes[1].style,J=this.ico; if(subView.display=='none'){ subView.display=''; ] ; }else{ subView.display='none'; }, select:function ( sender){ var sub=sender.parentNode.parentNode.getElementsByTagName("INPUT"); for (var i=0;i } }; JE.add=function(){ this.msg('関数が追加されています...*_^'); 🎜> JE.editItem=function(){ this.msg('関数が追加されています...*_^'); } JE.begin=function(){/* UI コントロール関連の応答 */ var $=function (id){return document.getElementById(id)} /* 関連する UI */ JE.editUI=$("json_eidit"); 🎜>JE.msgUI=$("json_editInfo"); JE.treeUI=$("update"); "); var fontSize=$("fontSize"); /* ツリー項目をクリック*/ JE.onclick=function(item){ var key='キー名: ', val=' キー値: ' (item.getAttribute('val')==''?'メンバーリスト' :' '), add=' New ', edit=' Modify '; JE.msg(key val add edit , 'info'); } /* コード変更イベントをリッスンします*/ JE.editUI.oninput=JE.editUI.onpropertychange=function (){ if(JE.formating) return; /* 書式設定ではツリーは更新されません*/ if(/^s*$/.test(this.value))return JE.msg('コードを JSON 形式で入力してください!'); 🎜>clearTimeout( JE.update); try{JE.data=eval('(' this.value ')'); }catch(e){ JE.editUI.style.color ='red' ; return JE.msg("ソース コードにエラーがあります: " e.description '、編集中の場合は、このメッセージを無視してください。','err'); ; JE.editUI.style.color='#000'; if(auto.checked||JE.firstUp){/*同期している場合*/ JE.msg('構文は正しいです、ツリーが再構築中です、お待ちください。 🎜>}else{ JE.msg('構文は正しいです。更新をクリックするか、ビューの同期スイッチをオンにするか、編集を続行してください。') } return } ; if(window.ActiveXObject) document .execCommand("BackgroundImageCache", false, true); /* インターセプトタブ、自動フォーマット*/ JE.editUI.onkeydown=function () { if(event.keyCode==9) {$('format_indent').onclick();event.returnValue=false;}; JE.code=this.value; >/* フォーマット*/ var format= function(compress){ var code=JE.format(JE.editUI.value,compress); if( code)JE.editUI.value=code; JE.editUI.focus(); 戻りコード } /* ツールバー ボタン*/ $('format_indent').onclick=function (){if(format())JE.msg('完全なインデント スタイル変換,' JE.countInfo)} $('format_compress').onclick= function (){if(format(true)!=unknown)JE.msg('完全なコンパクト スタイル変換,' JE.countInfo);} updateUI.onclick=function ( ){ JE.firstUp=true ; JE.editUI.onpropertychange()?JE.msg('ビューが正常に更新されました!'): JE.msg('データが間違っています。更新に失敗しました!','err ') JE.firstUp=false ; } $('clear_txt').onclick=function (){JE.editUI.value=JE.treeUI.innerHTML=''; .focus();} auto .onclick=function (){JE.msg('ビュー関数の自動同期' (this.checked?'On':'Off!'));}; * 名前を付けて保存*/ if(/ *@cc_on !@*/true){$('save_as').style.display='none'}; $('save_as').onclick=function (){ var d=document, w=d.createElement('IFRAME'); w.style.display="none"; d.body.appendChild(w); setTimeout(function(){ var g =w.contentWindow.document; g.charset = 'utf-8'; g.body.innerHTML=JE.editUI.value; g .execCommand("saveas",", " json.txt") ; } }; function (){ JE.begin (); } // -->

JSON エディタの実装 code_json

関連記事