# 수식 편집기 패널
## Content
긴 수식 및 복잡한 수식은 좁은 수식 입력줄이나 단일 셀 상자에서 보기 및 편집하기 어렵습니다. 따라서, 수식 편집기(formula editor)는 수식을 여러 줄로 나누고 들여쓰기를 적용하여 보다 쉽게 읽고 편집할 수 있도록 해줍니다.
SpreadJS는 이 기능을 `gc.spread.sheets.formulapanel.x.x.x.min.js` 스크립트 파일에 의존하는 플러그인으로 제공합니다. 따라서, 애플리케이션에서 수식 편집기 패널을 사용하려면 해당 스크립트 파일을 포함해야 합니다.
워크북이 수식 편집기 패널과 동기화되도록 하려면 `attach()` 메서드를 사용하여 바인딩해야 합니다.
다음 코드 샘플은 워크북을 수식 편집기 패널에 바인딩하는 방법을 보여줍니다.
```javascript
let workbook = new GC.Spread.Sheets.Workbook("spread-host");
let formulaEditor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor("formula-editor-host");
formulaEditor.options.formatWidthLimit = -1;
formulaEditor.options.tabSize = 4;
formulaEditor.attach(workbook);
......
```
수식 편집기는 **formatWidthLimit** 옵션을 제공하여 선택한 제한 값에 따라 수식 텍스트 너비를 조정할 수 있습니다. 사용 가능한 값은 다음과 같습니다:
| **값** | **설명** |
| --- | --- |
| Auto | 수식 텍스트 너비를 DOM 컨테이너의 너비에 따라 자동 조정합니다. 텍스트 길이가 DOM 컨테이너 너비를 초과할 경우에만 수식이 여러 줄로 나뉘어 표시됩니다. |
| Number | 수식 표현식(하위 표현식 포함)의 길이가 지정된 값을 초과할 경우 수식 텍스트 너비를 조정합니다. -1로 설정하면 수식 표현식이 항상 여러 줄로 포맷됩니다. |
또한 **tabSize** 옵션은 Tab 키를 눌렀을 때 수식 표현식 앞에 삽입될 탭 공백 수를 지정합니다. 수식 편집기를 사용하려면 편집할 수식을 포함하는 셀을 선택합니다. 아래 이미지를 참고하시기 바랍니다 :
## **주요 기능**
수식 편집기의 주요 기능은 아래와 같습니다.
**Formatter**: 수식 들여쓰기, 공백, 줄바꿈 등을 조정하여 수식을 더 읽기 쉽고 유지보수하기 쉬운 형태로 만듭니다.
**자동 완성 제안**: 수식 자동 완성, 함수 인수 힌트 등을 제공하여 수식 작성을 더 효율적으로 만들어줍니다. 수식을 입력하는 동안 사용 가능한 함수, 사용자 정의 이름, 열거형 인수 등을 지능적으로 제안합니다:
**유연한 아웃라인 뷰**: 수식 편집기에서 수식 뷰를 확장 또는 축소할 수 있습니다.
**구문 강조 표시**: 수식의 다양한 구문 요소를 강조 표시하여 가독성과 사용성을 향상시킵니다.:
**Lint 옵션**: 잘못된 함수 인수, 괄호 불일치 등 오류를 알려주는 경고 메시지를 제공합니다.
**툴팁 정보**: 사용자가 함수 위에 마우스를 올리거나 함수를 입력할 때 해당 함수에 대한 자세한 내용을 툴팁으로 표시합니다.
**테마 커스터마이징**: 여러 테마를 제공하며, 기존 테마를 사용자 지정하여 편집기의 외관을 변경할 수 있습니다.
CSS 파일을 수정하여 수식 편집기의 외형(예: 글꼴, 툴팁, 배경, 전경, 참조된 범위 등)을 변경할 수 있습니다.
다음 CSS는 수식 편집기 패널의 글꼴 및 함수, 문자열, 전경, 배경색을 정의하는 방법을 설명합니다:
```javascript
// 함수 토큰의 색상을 정의
.gc-formula-editor-token-function {
color: blue;
}
// 문자열 토큰의 색상을 정의
.gc-formula-editor-token-const-string {
color: red;
}
// 수식 편집기의 색상, 배경색, 글꼴을 정의
.gc-formula-editor-content {
color: black;
background-color: white;
font: 16px, sans-serif;
}
```
## **SpreadJS 디자이너 사용**
Spread 디자이너에서 수식 편집기를 사용하려면, 편집할 수식을 포함하는 셀을 선택하고 **수식(FORMULAS) > 수식 분석(Formulas Auditing)** 탭 그룹의 **수식 편집기 표시(Show Formula Editor)** 버튼을 클릭해야 합니다.
수식 편집기를 통해 패널에 표시될 수식 뷰를 선택할 수 있습니다. 수식 뷰와 수식 텍스트 모두 편집할 수 있으며, 편집된 수식은 **저장(Save)** 버튼을 사용해 저장할 수 있습니다. 저장 시, SpreadJS는 에디터 텍스트를 셀에 자동으로 동기화합니다. 또한 `editor.commandManager` API를 사용하여 비동기화 처리도 가능합니다.
추가로, **설정(Format)** 버튼을 사용하여 적용된 수식의 포맷된 트리 뷰를 가져오거나 수식 너비 및 탭 크기 제한을 변경할 수 있습니다.
아래 GIF는 SpreadJS 디자이너의 수식 편집기 패널을 보여줍니다:
## **단축키**
수식 편집기에서 수식을 포맷할 때 사용할 수 있는 단축키는 다음과 같습니다:
| **단축키** | **동작** |
| --- | --- |
| Alt+Shift+F | FormatDocument |
| F4 | ToggleAbsoluteRelativeReferences |
| Ctrl+S | CommitContentToActiveCell |
| ESC | ExitEdit/ CloseHints |
| Ctrl+Shift+Whitespace | ShowHints |