How to add custom font and custom font size in a Vaadin RichTextArea

Question

I have been trying to add custom fonts and custom sizes in select boxes provided with the RichTextArea of Vaadin.

How do I do this?

Answer 1

There is no "server-side" way to handle this (up to including Vaadin 7.4). As the Book of Vaadin states:

RichTextArea inherits TextField and does not add any API functionality over it. You can add new functionality by extending the client-side components VRichTextArea and VRichTextToolbar.

So now have a look at the source of VRichTextToolbar and see, that the font lists are build by private methods called in the c'tor. So basically you would have to write it for yourself. Then you would have to learn, how to actually add all those functionality on the client side.

So other tricks to make this work are: Use CSS to hide things from the toolbar (not feasable in your case, you want might want to also add) or use Javascript to add/remove/manipulate things. Of course this is very fragile in the long term.

In the end there is only one sound advice (at least for Vaadin up to 7.4):

Use an addon:

• CKEdit *) https://vaadin.com/directory#addon/ckeditor-wrapper-for-vaadin:vaadin

• CKEdit https://vaadin.com/directory#addon/ckeditor-connector:vaadin

• TinyMCE (only Vaadin6) https://vaadin.com/directory#addon/vaadin-wrapper-for-tinymce:vaadin

*) Ratings and download counts make this the best choice as of writing these lines.