...

이미지 삽입 기능으로, 아이콘 클릭 시 이미지 파일을 추가 할 수 있다. 삽입한 이미지는 드래그앤드랍으로 사이즈를 조절 할 수 있다. 이미지를 클릭하면 아래와 같이 이미지 에디팅 옵션이 출력된다.

...

#이미지 에디팅 옵션

• 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

: 순번 없는 리스트 삽입

Ordered List : 순범 있는 리스트 삽입

Insert Horizontal Line : 수평 라인 삽입

Fullscreen : 입력화면 크게보기

1. Editor Type

에디터 타입을 설정한다. 인라인 스타일은 Default 이고, 변경을 원한다면 Editor를 선택한다.

...

Setting

...

Result

...

2. Height Min Size

에디터 세로 높이 사이즈 MIN 값을 설정할 수 있다.

...

Setting

...

Result

...

3. Height Max Size

에디터 세로 높이 사이즈 MAX 값을 설정할 수 있다.

...

Setting

...

Result

...

리스트를 아래와 같이 사용 할 수 있다.

...

5. Ordered List

순번이 있는 리스트를 아래와 같이 삽입하여 사용 할 수 있다.

...

6.Insert Horizontal Line

입력 공간에 수평 라인을 삽입 할 수 있다.

...

7. Fullscreen

입력 화면을 풀스크린으로 크게 보는 기능을 제공한다.

...

ETC : Text Editor in the Form

Form 컴포넌트 내에 엘리먼트로 사용될 경우 설정 가능한 옵션은 다음과 같다.

...

폼 내에서는 텍스트 에디터의 라벨을 숨김처리 할 수 있다.

...

Setting

...

Result

...

2. Grouping

폼 내에서는 텍스트 에디터에 그룹 라벨을 붙이고, 레이아웃과 스타일을 설정 할 수 있다.

...

• Group Label : 텍스트 에디터의 그룹명

• Group Layout : Vertical, Inline 2가지 레이아웃 제공

• Group Type : Field, Card, Tab 3가지 형태로 변경 가능

...

그룹 타입을 Tab으로 설정 할 경우 Tab 스타일과 위치를 설정하는 추가 옵션이 있다. 그룹 탭 위치를 Top 또는 Bottom으로 설정 할 경우에는 Tab 텍스트의 중앙 정렬 여부를 추가로 설정 할 수 있다.

...

• Group Tab Type : Card, Line 2가지 형태로 Tab 설정 가능

• Group Tab Position : Top, Right, Bottom, Left 4가지 영역으로 Tab을 위치 시킴

• Group Tab Centered : Top/Bottom에 위치한 탭 텍스트의 정렬 설정 옵션

...