GWT - Widget RichTextArea

Introducción

los RichTextAreawidget representa un editor de texto enriquecido que permite estilos y formatos complejos. Debido a que algunos navegadores no admiten la edición de texto enriquecido y otros solo admiten un subconjunto limitado de funciones, hay dos interfaces de formateador, a las que se accede a través de getBasicFormatter () y getExtendedFormatter ().

Un navegador que no admita la edición de texto enriquecido devolverá nulo para ambos, y uno que admita solo la funcionalidad básica devolverá nulo para el último getExtendedFormatter ().

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.RichTextArea clase -

public class RichTextArea
   extends FocusWidget
      implements HasHTML, HasInitializeHandlers, HasSafeHtml

Reglas de estilo CSS

Las siguientes reglas de estilo CSS predeterminadas se aplicarán a todo el widget TextBox. Puede anularlo según sus requisitos.

.gwt-RichTextArea {}

Constructores de clases

No Señor.	Constructor y descripción
1	RichTextArea() Crea un nuevo objeto RichTextArea en blanco sin hoja de estilo.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	HandlerRegistration addInitializeHandler(InitializeHandler handler) Agrega un controlador InitializeEvent.
2	RichTextArea.BasicFormatter getBasicFormatter() Obsoleto. use getFormatter () en su lugar.
3	RichTextArea.ExtendedFormatter getExtendedFormatter() Obsoleto. use getFormatter () en su lugar.
4	RichTextArea.Formatter getFormatter() Obtiene la interfaz de formato de texto enriquecido.
5	java.lang.String getHTML() Obtiene el contenido de este objeto como HTML.
6	java.lang.String getText() Obtiene el texto de este objeto.
7	boolean isEnabled() Obtiene si este widget está habilitado.
8	protected void onAttach() Este método se llama cuando se adjunta un widget al documento del navegador.
9	protected void onDetach() Este método se llama cuando un widget se separa del documento del navegador.
10	void setEnabled(boolean enabled) Establece si este widget está habilitado.
11	void setFocus(boolean focused) Enfoque / desenfoque explícitamente este widget.
12	void setHTML(java.lang.String safeHtml) Establece el contenido de este objeto a través de HTML seguro.
13	void setHTML(java.lang.String html) Establece el contenido de este objeto a través de HTML.
14	void setText(java.lang.String text) Establece el texto de este objeto.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de widget RichTextBox

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget RichTextBox en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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; 
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget 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);
   }	
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page