Roughian Examples Site Map - GWT Examples - Tutorials

RichTextArea


Version 1.4 onwards

The RichTextArea is an area where rich text can be created



Listeners



Notes


The RichTextArea is quite a sophisticated widget, allowing the user or program to create and manipulate rich text. At the same time, it is still pretty raw. There are no controls supplied with GWT widget - the formatter toolbar you see in GMail and in the kitchen sink aren't available (most people, I expect, go and nick the one from the kitchen sink example)

Dependent on which browser your user is using, you will get different kinds of functionality, and you have to work out which one is being used and respond appropriately. There are three levels

You need to get each of the two existing types and only attempt to call functions if that formatter is not null. Your formatter type is


Code


The only things worth noting are the getting of the formatter type and using these to decide what buttons to show. If using the button would cause an error in your browser, then you don't get to see it, let alone use it.

// Get formatters - will be null if not available
final ExtendedFormatter ef = rta.getExtendedFormatter();
final BasicFormatter bf = rta.getBasicFormatter();

// Main container panel
VerticalPanel panel = new VerticalPanel();
panel.addStyleName("demo-panel-padded");

// Add the RichTextArea
panel.add(rta);
panel.setCellWidth(rta, "100%");
rta.setWidth("100%");

// Create a button box and add it to the main panel
HorizontalPanel buttons = new HorizontalPanel();
panel.add(buttons);
panel.setCellWidth(buttons, "100%");

// A simple button to show the text - anything can do this
buttons.add(new Button("Show Text", new ClickListener()
{
    public void onClick(Widget sender)
    {
        Window.alert(rta.getText());
    }
}));

// A simple button to show the HTML - anything can do this, too
buttons.add(new Button("Show HTML", new ClickListener()
{
    public void onClick(Widget sender)
    {
        Window.alert(rta.getHTML());
    }
}));

// A button to toggle 'bold' - BasicFormatters and above - note that the
// button won't be shown if the browser can't do this so no checking is
// required when the button is pressed
if (bf != null)
{
    buttons.add(new Button("Toggle Bold", new ClickListener()
    {
        public void onClick(Widget sender)
        {
            bf.toggleBold();
        }
    }));
}
// A button to toggle 'bold' - ExtendedFormatters only - note that the
// button won't be shown if the browser can't do this so no checking is
// required when the button is pressed
if (ef != null)
{
    buttons.add(new Button("Add Rule", new ClickListener()
    {
        public void onClick(Widget sender)
        {
            ef.insertHorizontalRule();
        }
    }));
}