JavaFX UI - 17.HTML Editor

HTMLEditor 컨트롤은 풍부한 기능을 갖춘 텍스트 편집기이다. HTML5 문서 편집이 가능하고, 다음과 같은 편집 기능들을 포함한다.

• 텍스트 포맷팅 : bold, italic, underline, strike
• Paragraph setting : format, font family, font size
• 포그라운드 및 백그라운드 색상
• Text indent (들여쓰기)
• Bulleted and numbered lists
• 텍스트 정렬
• Adding a horizontal rule
• 복사/붙여넣기

아래 화면은 JavaFX 어플리케이션에 텍스트 편집기가 추가된 모습이다.

1. Adding and HTML Editor

HTMLEditor 컨트롤은 아래 예제에서와 같이 직접 scene에 추가될 수도 있고, 별도의 레이아웃 컨테이너를 통해 추가될 수도 있다.

Example 17-1 Adding an HTML Editor to a JavaFX Application

위 예제를 실행하면 아래와 같은 어플리케이션이 나타난다.

텍스트 포맷팅을 위한 툴바는 기본 구현에서 제공되는 것으로써, 이를 숨길 수는 없다. 그러나 CSS 스타일을 통해 편집기 모습을 변경할 수 있다.

Example 17-2 Styling the HTMLEditor

위와 같은 스타일을 Example 17-1에 적용하면 아래와 같은 모습으로 바뀐다.

위에서 적용된 스타일은 컴포넌트 border와 툴바의 폰트가 변경되었다.

HTMLEditor 클래스는 어플리케이션이 시작될 때 편집 영역에 나타날 컨텐츠를 설정하기 위해 setHtmlText 메서드를 제공한다.

Example 17-3 Setting the Text Content

위 예제를 실행하면 아래와 같은 모습이다.

2. Using an HTML Editor to Build the User Interface

HTMLEditor 컨트롤을 이용하여 인스턴트 메신저 서비스, 이메일 클라이언트 심지어는 CMS (content management system) 까지도 구현할 수 있다.

아래 예제는 이메일 클라이언트에서 흔히 볼 수 있는 UI를 구성한 것이다.

Example 17-4 HTMLEditor Added to the Email Client UI





위 예제를 실행한 화면은 아래와 같다.

setPrefWidth와 setPrefHeight 메서드를 통해 HTMLEditor의 너비와 높이를 지정할 수 있다. 위 예제에서는 높이만 지정하고 너비는 따로 지정하지 않았다. 이 때 너비는 HTMLEditor의 컨테이너인 VBox 컨테이너에 의해 정해진다. 텍스트 컨텐츠가 정해진 편집 영역의 높이를 넘어가면 수직 스크롤바가 나타날 것이다.


3. Obtaining HTML Content

HTMLEditor 컨트롤의 텍스트를 편집하거나 초기 컨텐츠를 지정하는 것 이외에, 입력된 텍스트를 HTML 형식으로 얻어올 수 있다.

다음 예제는 이러한 작업을 구현한 것이다.

Example 17-5 Retrieving HTML Code

 

 

HTMLEditor 클래스의 getHTMLText 메서드는 현재 입력된 텍스트 컨텐츠를 HTML 문자열 형식으로 반환한다. 위 예제에서는 이러한 HTML 컨텐츠를 별도의 TextArea에 표시해준다.

 

위 예제를 확장하여, HTMLEditor의 컨텐츠를 파일로 저장한 후, 이를 WebView 컨트롤에서 로딩할 수 있다. 아래 예제는 이를 구현한 코드이다.


Example 17-6 Rendering Edited HTML Content in a Browser




위 예제를 실행한 모습은 아래와 같다.