RichTextEditor¶
목적¶
UI5에서 제공하는 RichTextEditor는 텍스트의 디자인을 변경할 수 있는 TextArea UI
주요 단계¶
1. RichTextEditor UI 생성¶
- o 원하는 Aggregation을 선택하여 RichTextEditor 를 생성
<사진 1> RichTextEditor UI 생성 팝업 화면
2. RichTextEditor UI 속성¶
<사진 2> RichTextEditor 배치 및 속성(Attributes) 설정 화면
2.1. 주요 속성¶
| Name | Description |
|---|---|
| visible | UI 표시 여부 (true / false) |
| value | 텍스트 입력란의 내용 |
| textDirection | 텍스트 정렬 (LTR: 왼쪽, RTL: 오른쪽, Inherit: 양쪽 정렬) |
| width | RichTextEditor의 가로 길이 |
| height | RichTextEditor의 세로 높이 |
| editable | 텍스트 수정 가능 여부 (true / false) |
| showGroupFontStyle | 글자 굵기, 밑줄 등의 버튼 표시 여부 (true / false) |
| showGroupTextAlign | 텍스트 정렬 버튼 표시 여부 (true / false) |
| showGroupStructure | 문단 번호, 들여쓰기 버튼 표시 여부 (true / false) |
| showGroupFont | 글자 스타일, 색상, 크기 버튼 표시 여부 (true / false) |
| showGroupClipboard | 잘라내기, 복사, 붙여넣기 버튼 표시 여부 (true / false) |
| showGroupInsert | 이미지, 이모티콘 삽입 버튼 표시 여부 (true / false) |
| showGroupLink | 링크 삽입, 삭제 버튼 표시 여부 (true / false) |
| showGroupUndo | 실행 취소 버튼 표시 여부 (true / false) |
| wrapping | RichTextEditor의 가로 크기를 초과하는 텍스트의 자동 줄 바꿈 여부 |
| required | value 값 필수 입력 여부 (true / false) |
| sanitizeValue | HTML 실행 여부 (true / false) |
| tooltip | 마우스를 올렸을 때 표시할 텍스트 |
| styleClass | CSS 스타일 적용 |
3. RichTextEditor 실행 화면¶
- o Web 화면에서 RichTextEditor UI Object가 정상적으로 표시됨
<사진 2> RichTextEditor 아이콘 기능 표시
3.1. 주요 기능¶
| No. | Description |
|---|---|
| 1 | 글자 굵기, 기울기, 밑줄, 취소선 적용 |
| 2 | 텍스트 좌측, 중앙, 우측 정렬 |
| 3 | 문장 앞에 번호 또는 점 추가 |
| 4 | 문장 들여쓰기 및 내어쓰기 |
| 5 | 표 삽입 기능 |
| 6 | 잘라내기, 복사, 붙여넣기 기능 |