[jQuery] ace editor 간단 설정

<div id="jsonEditor">
</div>

위와 같은 경우, 다음과 같이 div를 ace editor로 사용할 수 있다.

let data = {
  "hello": "world"
}
let jsonEditor = getCodeEditor("jsonEditor", "ace/mode/json");
let str = JSON.stringify(data, undefined, 4);
jsonEditor.setValue(str);
console.log("The Contents of ace editor : " + jsonEditor.getValue());
jsonEditor.setReadOnly(true);

• getCodeEditor : ace editor로 사용할 영역의 ID와 모드를 매개 변수로 입력
• 값 설정은 setValue()를 사용. 이 때, Json 형식을 그대로 넣지 말고 JSON.stringfy를 해줄 것!
  • 마찬가지로, ace editor의 내용을 가져오려면 getValue()를 사용한다.
• setReadOnly(true) : 해당 ace editor를 읽기 전용으로 설정.
  
  • 가시적으로 변경되는 것은 없지만, editor 내부에 내용을 작성할 수 없게 됨.
  • readonly상태를 해제하려면 setReadOnly(false)를 사용할 것.

let obj = {
  "foo": "bar"
}
let tmp = JSON.stringify(obj, undefined, 4);
$("#jsonEditor").hide();
jsonEditor.setValue(tmp);
$("#jsonEditor").show();
jsonEditor.renderer.updateFull(true);

• .renderer.updateFull(true) : hidden이나 hide() 등을 통해 숨겨졌던 ace editor는 .setValue가 즉각 반영되지 않는 경우가 있음.
  • 이 경우, ace editor에는 기존의 {"hello": "world"}가 그대로 남아 있음.
    • 그러나 getValue()의 결과는 {"foo": "bar"}가 반영되어 있을 수 있다. 즉, 내용이 새로고침 / 업데이트 되지 않음!
  • 이 때, renderer.updateFull(true)를 사용하여 editor에 즉시 반영할 수 있다. 매개변수로 true를 주는 것을 잊지 말자.