Skip to main content

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.

showLineNumbers {5,8}
1
import com.psddev.cms.rte.RichTextToolbar;

2
import com.psddev.cms.rte.RichTextToolbarItem;

3
import com.psddev.cms.rte.RichTextToolbarStyle;

4


5
public class CustomRichTextToolbar implements RichTextToolbar { 1

6


7
    @Override

8
    public List<RichTextToolbarItem> getItems() { 2

9
        return Arrays.asList(

10
            RichTextToolbarStyle.BOLD,

11
            RichTextToolbarStyle.ITALIC,

12
            RichTextToolbarStyle.UNDERLINE);

13
    }

14
}
  • 5. Specifies a class that implements RichTextToolbar.
  • 8. Specifies 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.RichTextannotation.

showLineNumbers {6}
1
import com.psddev.cms.db.Content;

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

3


4
public class Article extends Content  {

5


6
    @ToolUi.RichText(toolbar=CustomRichTextToolbar.class) 1

7


8
    private String body;

9


10
}
  • 6. Applies the toolbar class created in Defining a toolbar class to the rich-text field body.

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

See also: