| Table of Contents |
|---|
TextEditor UI
텍스트 에디터는 단순한 문서 파일을 편집하기 위한 컴포넌트이다. 텍스트 에디터의 유형은 2가지로 구분한다.
...
No
...
Basic Text Field
...
Description
...
1
...
Default Text Editor
...
에디팅 옵션이 플로팅 스타일로 출력되는 Inline 타입의 텍스트 에디터
...
2
...
Fixed Text Editor
...
에디터는 2가지 타입으로 사용 가능하다.
1. Inline Type
텍스트 에디터의 기본 UI는 에디팅 옵션이 플로팅 스타일로 출력되는 Inline 타입이다. 다른 입력 컴포넌트와 동일하게 Hide Label 과 Disable 옵션 기능을 제공한다.
...
입력 필드를 클릭하여 Active 상태가 되면 좌측 상단에 
플로팅 버튼이 출력된다. 플로팅 버튼을 클릭하면 7가지 에디팅 기능을 사용 할 수 있으며, 에디팅 기능 상세 내용은 다음과 같다. (참고 : https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Input-Status )
...
2. Editor Type
에디팅 기능이 펼침 형태로 고정되어 있는 Editor 타입의 UI는 다음과 같다.
...
...
Editing Function
텍스트 에디터의 Default인 Inline 타입을 기준으로 7가지 에디팅 기능을 제공한다.
1. Insert Image
이미지 삽입 기능으로, 아이콘 클릭 시 이미지 파일을 추가 할 수 있다. 삽입한 이미지는 드래그앤드랍으로 사이즈를 조절 할 수 있다. 이미지를 클릭하면 아래와 같이 이미지 에디팅 옵션이 출력된다.
...
#이미지 에디팅 옵션
Replace : 삽입한 이미지를 다른 이미지로 교체
Align : 이미지 정렬(
Left,Center,Right)Image Caption :
Insert Video
영상 삽입
Insert Table : 테이블 삽입
...
이미지 하단에 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
: 순번 없는 리스트 삽입
Ordered List : 순범 있는 리스트 삽입
...