[Ace] ace editor json beautify 하기

참고문서)

https://ace.c9.io/#nav=howto

 

필요한 JS 파일) 필요한 resource 모두 받아 두었습니다.

<script src="/statics/js/ace/ace.js"></script>
<script src="/statics/js/ace/ext-beautify.js"></script>

 

Editor DIV)

<div id="shadowStateEditor" style="width:100%; height:300px;">
{
  "state": {
    "reported": {
      "welcome": "Ace World"
    }
  }
}
</div>

 

Javascript) 설정 및 적용

// res.data 는 ajax 처리 후 success 에서 넘겨 받은 json 데이터 입니다.

ace.edit("shadowStateEditor").setValue(
  JSON.stringify(
    JSON.parse(res.data), null, 2
  )
);

drawShadowStateEditor();

function drawShadowStateEditor(){
  var beautify = ace.require("ace/ext/beautify");
  var editor = ace.edit("shadowStateEditor");

  editor.setTheme("ace/theme/nord_dark");
  editor.session.setMode("ace/mode/json");
  editor.setShowInvisibles(false);
  editor.setReadOnly(true);
  editor.setShowPrintMargin(false);
  editor.session.setTabSize(2);
  editor.session.setUseSoftTabs(true);
  editor.session.setUseWrapMode(true);

  beautify.beautify(editor.session);

  editor.resize();
}