| Table of Contents |
|---|
...
텍스트 에디터는 단순한 문서 파일을 편집하기 위한 컴포넌트이다. 텍스트 에디터는 2가지 타입으로 사용 가능하다.
( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )
1. Inline Type
텍스트 에디터의 기본 UI는 에디팅 옵션이 플로팅 스타일로 출력되는 Inline 타입이다.
...
이미지 삽입 기능으로, 아이콘 클릭 시 이미지 파일을 추가 할 수 있다. 삽입한 이미지는 드래그앤드랍으로 사이즈를 조절 할 수 있다. 이미지를 클릭하면 아래와 같이 이미지 에디팅 옵션이 출력된다.
...
#이미지 에디팅 옵션
Replace : 삽입한 이미지를 다른 이미지로 교체
Align : 이미지 정렬(
Left,Center,Right)Image Caption : 이미지 하단에 Label 텍스트 추가
Remove : 이미지 삭제
Insert Link : 이미지에 URL 추가
Location Type : 삽입된 이미지의 위치 타입(
Inline,Break Text)Style : 이미지 스타일 설정(
Rounded,Bordered,Shadow)Alternative Text : 이미지 대체 텍스트 기능
Change Size : 이미지의 Width, Height 설정
2. Insert Video
비디오 삽입 기능으로, 아이콘 클릭 시 영상 URL을 입력하여 비디오를 삽입 할 수 있다. 삽입된 영상은 드래그앤드랍으로 사이즈를 조절 할 수 있으며, 영상을 클릭하면 아래와 같이 영상 에디팅 옵션이 출력된다.
...
#비디오 에디팅 옵션
Replace : 영상 URL 변경
Remove : 비디오 삭제
Location Type : 삽입된 이미지의 위치 타입(
Inline,Break Text)Align : 이미지 정렬(
Left,Center,Right)Change Size : 이미지의 Width, Height 설정
Auto Play : 비디오 자동 재생 기능
3. Insert Table
테이블 삽입 기능으로, 아이콘 클릭 시 테이블이 입력 공간에 추가된다. 테이블 전체 사이즈는 드래그앤드랍으로 조절 할 수 있으며, 테이블을 클릭하면 아래와 같이 테이블 에디팅 옵션이 출력된다.
...
#테이블 에디팅 옵션
Table header : 첫번째 Row를 헤더로 지정하고 칼라 회색으로 변경
Remove : 테이블 삭제
Row : 행 추가 및 삭제 (
Insert row above,Insert row below,Delete row)Column : 열 추가 및 삭제 (
Insert column before,Insert column after,Delete column)Table Style : 테이블 스타일 설정(
Dashed Boreders,Alternate Rows)Cell : 셀 병합 및 병합 해제(
Merge cells,Vertical Split,Horizontal split)Cell Background : 셀 칼라 설정
Vertical Align : 텍스트 세로 정렬 옵션(
Top,Middle,Bottom)Horizontal Align : 텍스트 가로 정렬 옵션(
Left,Center,Right,Justify)Cell Style : 셀 스타일 설정(
Highlighted,Thick)
4. Unordered List
순번 없는 리스트를 아래와 같이 사용 할 수 있다.
...
폼 내에서는 텍스트 에디터에 그룹 라벨을 붙이고, 레이아웃과 스타일을 설정 할 수 있다. 사용하고자 하는 Group Type 옵션에 따라 설정 가능한 Sub옵션은 다음과 같다.
Group Type : 그룹 타입 선택(
Field,Card,Tab,Table)
2-1. Field Type
Group Label : 텍스트 에디터의 그룹명 입력
Group Layout : 레이아웃 선택(
Vertical,Inline2가지 레이아웃 제공Group Type : Field, Card, Tab 3가지 형태로 변경 가능)
...
2-2. Card Type
Group Label : 텍스트 에디터의 그룹명 입력
Group Layout : 레이아웃 선택(
Vertical,Inline)
...
2-3. Tab Type
그룹 타입을 Tab으로 설정 할 선택한 경우 Tab 스타일과 타입과 위치를 설정하는 추가 옵션이 있다. 그룹 탭 위치를 Top 또는 Bottom으로 설정 할 경우에는 Tab 텍스트의 중앙 정렬 여부를 추가로 설정 할 수 있다. 옵션을 추가로 제공한다.
Group Label : 텍스트 에디터의 그룹명 입력
Group Layout : 레이아웃 선택(
Vertical,Inline)Group Tab Type : 탭 타입 선택(
Card,Line2가지 형태로 Tab 설정 가능)Group Tab Position : 탭 위치 설정(
Top,Right,Bottom,Left4가지 영역으로 Tab을 위치 시킴)Group Tab Centered :
Gourp Tab Position{Top, Bottom}선택 할 경우 사용 가능한 텍스트 정렬 옵션
...
Setting
...
Result
...
...
| Info |
|---|
...
그룹핑{ON}, 그룹라벨{Group Label Text}, 그룹 레이아웃{Vertical}
Tab Type{Card}, Tab Position{Left} |
...
| Info |
|---|
Tab Type{Line}, Tab Position{Top}, Tab Centered{ON} |
...
2-4. Table Type
그룹 타입을 Table로 선택하면 그룹 테이블의 헤더와 Col 라벨을 설정 할 수 있다.
Group Table Header Label : 그룹 테이블의 헤더 라벨 입력
Group Table Column Label : 그룹 테이블의 Col 라벨 입력
...