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:'img uuid=20 94c793496278bde84be80bb6cb2117f5', r1c 5bc8544cecd8b7f82fcdb', //접두사 이미지 nl:'img? uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', //파일 구조 줄 f1:'img?uuid= 202ccc63 9afd44130a3946e9837672479c', f2:'img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c ', 루트:'img?uuid=2069cf3fd1e53a2bb365f 771eac65b50a2', //폴더 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로 변환*/ var draw=[],This=this,ico=this.ico JE.firstUp=false;/*첫 번째 자동 생성 완료*/ var inform(prefix/*Prefix HTML*/, lastParent/*상위 노드가 꼬리 노드인지 여부(아이콘이 비어 있는지 확인 | 구조 선)*/,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 알림 (prefix This.img(lastParent?ico.nl:ico.vl),i==value.length- 1,i,value[i]) draw.push(' '); }else if(value&&typeof value=='object'){/* 객체 노드 처리*/ draw.push(' ',This.draw( prefix,rl,ico.obj,name,''),' ');/* 폴더 그리기*/ var len=0,i=0>for( 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> '); }; };/* [ ] 또는 {}가 그려지지 않음 */ 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 case J.r1 :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) ' '키 ="' 이름 '" 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='' ico.src=J[id ] ; }else{ subView.display='none'; ico.src=J[id 'c'] }, 선택:함수 ( 보낸 사람){ 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=$("tree") var updateUI=$("update") var auto=$("autoUpdate "); varfontSize=$("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('구문이 정확합니다. , 트리가 재구성되는 중입니다. JE.update=setTimeout(function(){ JE.toTree(); },450); 🎜>}else{ JE.msg('구문이 정확합니다. 새로고침을 클릭하거나 보기 동기화 스위치를 켜거나 계속 편집하세요!') } return true; ; 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) JE.formating=true if( code)JE.editUI.value=code; JE.editUI.focus(); setTimeout(function(){JE.formating=false;},1000) 반환 코드; } /* 도구 모음 버튼*/ $('format_indent').onclick=function (){if(format())JE.msg('전체 들여쓰기 스타일 변환,' JE.countInfo)} $('format_compress').onclick= function (){if(format(true)!=undefine)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='';JE.editUI .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") ; },1); } }; 여기서 시작*/ window.onload= 함수(){ JE.begin() } // -->

JSON 편집기 구현 code_json

관련 기사