GWT - RichTextArea 元件

介紹

RichTextArea 元件是一個富文字編輯器，允許複雜的樣式和格式設定。由於一些瀏覽器不支援富文字編輯，而另一些瀏覽器只支援有限的功能子集，因此有兩個格式化程式介面，可以透過 `getBasicFormatter()` 和 `getExtendedFormatter()` 訪問。

完全不支援富文字編輯的瀏覽器這兩個方法都將返回 `null`，而只支援基本功能的瀏覽器將為後者 `getExtendedFormatter()` 返回 `null`。

類宣告

以下是 com.google.gwt.user.client.ui.RichTextArea 類的宣告：

public class RichTextArea
   extends FocusWidget
      implements HasHTML, HasInitializeHandlers, HasSafeHtml

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 TextBox 元件。您可以根據需要覆蓋它。

.gwt-RichTextArea {}

類建構函式

序號	建構函式 & 描述
1	RichTextArea() 建立一個新的、空白的 RichTextArea 物件，沒有樣式表。

類方法

序號	函式名稱 & 描述
1	HandlerRegistration addInitializeHandler(InitializeHandler handler) 新增一個 InitializeEvent 處理程式。
2	RichTextArea.BasicFormatter getBasicFormatter() 已棄用。請改用 `getFormatter()`。
3	RichTextArea.ExtendedFormatter getExtendedFormatter() 已棄用。請改用 `getFormatter()`。
4	RichTextArea.Formatter getFormatter() 獲取富文字格式化介面。
5	java.lang.String getHTML() 獲取此物件的 HTML 內容。
6	java.lang.String getText() 獲取此物件的文字。
7	boolean isEnabled() 獲取此元件是否啟用。
8	protected void onAttach() 當元件附加到瀏覽器的文件時呼叫此方法。
9	protected void onDetach() 當元件從瀏覽器的文件中分離時呼叫此方法。
10	void setEnabled(boolean enabled) 設定此元件是否啟用。
11	void setFocus(boolean focused) 顯式地聚焦/取消聚焦此元件。
12	void setHTML(java.lang.String safeHtml) 使用安全 HTML 設定此物件的內容。
13	void setHTML(java.lang.String html) 使用 HTML 設定此物件的內容。
14	void setText(java.lang.String text) 設定此物件的文字。

繼承的方法

此類繼承自以下類的方法：

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.FocusWidget
java.lang.Object

RichTextBox 元件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 RichTextBox 元件。請按照以下步驟更新我們在GWT - 建立應用章節中建立的 GWT 應用：

步驟	描述
1	建立一個名為HelloWorld的專案，放在com.tutorialspoint包下，如GWT - 建立應用章節中所述。
2	修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符src/com.tutorialspoint/HelloWorld.gwt.xml的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改後的樣式表文件war/HelloWorld.css的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-RichTextArea {
   padding:10px; 
}

以下是修改後的 HTML 宿主檔案war/HelloWorld.html的內容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>RichTextArea Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們來看一下 Java 檔案src/com.tutorialspoint/HelloWorld.java的內容，它將演示 TextBox 元件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RichTextArea;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create RichTextArea elements
      RichTextArea richTextArea = new RichTextArea(); 
      
      richTextArea.setHeight("200");
      richTextArea.setWidth("200");
      
      //add text to text area
      richTextArea.setHTML("<b>Hello World!</b> <br/> <br/>" + 
	  "<i>Be Happy!</i> </br> <br/> <u>Stay Cool!</u>");

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(richTextArea);      

      RootPanel.get("gwtContainer").add(panel);
   }	
}

完成所有更改後，讓我們像在GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果：

gwt_form_widgets.htm

列印頁面