Rich-Text Toolbar

To deploy a rich-text toolbar, you define it as a class and then assign the class to a field.

Defining a Toolbar Class

You can deploy customized rich-text editors that have certain controls for marking up text. For example, the following class provides only the boldface, italics, underline, and hyperlink buttons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 package content.article;

 import java.util.Arrays;
 import java.util.List;

 import com.psddev.cms.rte.RichTextToolbar;
 import com.psddev.cms.rte.RichTextToolbarItem;
 import com.psddev.cms.rte.RichTextToolbarStyle;

 public class CustomRichTextToolbar implements RichTextToolbar {

     @Override
     public List<RichTextToolbarItem> getItems() {
         return Arrays.asList(
             RichTextToolbarStyle.BOLD,
             RichTextToolbarStyle.ITALIC,
             RichTextToolbarStyle.UNDERLINE,
             RichTextToolbarStyle.LINK);
     }

 }

In the previous snippet

  • Line 10 specifies a class that implements RichTextToolbar.
  • Lines 15–18 specify the controls appearing in the toolbar.

Associating a Toolbar Class with a Rich-Text Field

You associate a customized rich-text editor with a text field using the @ToolUi.RichText annotation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
package content.article;

import com.psddev.cms.db.Content;
import com.psddev.cms.db.ToolUi;

public class Article extends Content  {

    @ToolUi.RichText(toolbar=CustomRichTextToolbar.class)
    private String body;

}

In the previous snippet, line 8 applies the toolbar class created in Defining a Toolbar Class to the rich-text field body.

../../../_images/custom-rte.png

The following classes have controls which can be used in your customized rich-text toolbar’s getItems method: