CodeEditor/JsonEditor

 

 

Component Type

사용자가 여러 줄의 Code를 직접 입력 할 수 있도록 코드 입력 영역을 제공하는 컴포넌트로는 CodeEditorJsonEditor 2가지가 있다. ( 참고: Input Component | Common options )

 

1. CodeEditor

CodeEditor의 기본 UI는 다음과 같다.

 

 

2. JsonEditor

JsonEditor는 자주 사용하는 json 언어의 CodeEditor를 별도의 컴포넌트로 만들어 제공하는 것으로 기본 UI와 옵션 기능은 CodeEditor와 동일하다.

 

 

 


Function

1. Width/Height

CodeEditor 입력창의 가로와 세로 길이를 직접 입력하여 설정 할 수 있다. 예를 들어 Height=200px로 설정하면 다음과 같이 입력 필드의 세로 길이만 증가한다.

 

 

2. Light/Dark Mode

CodeEditor를 Light Mode와 Dark Mode로 선택하여 사용 할 수 있다.

 

 

3. Language

CodeEditor 컴포넌트 내에서 사용 가능한 Language는 다음과 같다.

css, html, java, javascript, json, less, mysql, scss, typescript, xml