Directory

← Back

tinymce-for-vaadin

Wrap TinyMCE into Vaadin custom field

Author

Rating

Popularity

100+

TinyMCE for Vaadin

Just another TinyMCE wrapper project for Vaadin. This project is wrapping the official TinyMCE Web Component as a CustomField.

Simple usages

TinyMceField tinyMceField = new TinyMceField("Description");
tinyMceField.setWidthFull();
tinyMceField.setContent("<p>Hello World!</p>");

Configuration

You can configure this TinyMce, through TinyMceConfig class.

TinyMceConfig config = TinyMceConfig.builder()
        .width("100%")
        .apiKey("xxx-xxx-xxx")
        .menubar(List.of("false"))
        .plugins(List.of("anchor", "lists", "link", "code", "fullscreen"))
        .toolbar(List.of("undo", "redo", "|", "styleselect", "removeformat", "|", "bold", "italic", "underline", "|", "link", "anchor", "bullist", "numlist", "|", "alignleft", "aligncenter", "alignright", "alignjustify", "|", "outdent", "indent", "code", "fullscreen"))
        .build();
TinyMceField message = new TinyMceField("message", config);

Through TinyMceConfig class you can configure the following properties:

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2024-02-20
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Browser
N/A

tinymce-for-vaadin - Vaadin Add-on Directory

Wrap TinyMCE into Vaadin custom field tinymce-for-vaadin - Vaadin Add-on Directory
# TinyMCE for Vaadin Just another [TinyMCE](https://www.tiny.cloud/) wrapper project for Vaadin. This project is wrapping the [official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) as a [CustomField](https://vaadin.com/docs/latest/components/custom-field). ## Simple usages ``` TinyMceField tinyMceField = new TinyMceField("Description"); tinyMceField.setWidthFull(); tinyMceField.setContent("

Hello World!

"); ``` ## Configuration You can configure this TinyMce, through `TinyMceConfig` class. ``` TinyMceConfig config = TinyMceConfig.builder() .width("100%") .apiKey("xxx-xxx-xxx") .menubar(List.of("false")) .plugins(List.of("anchor", "lists", "link", "code", "fullscreen")) .toolbar(List.of("undo", "redo", "|", "styleselect", "removeformat", "|", "bold", "italic", "underline", "|", "link", "anchor", "bullist", "numlist", "|", "alignleft", "aligncenter", "alignright", "alignjustify", "|", "outdent", "indent", "code", "fullscreen")) .build(); TinyMceField message = new TinyMceField("message", config); ``` Through `TinyMceConfig` class you can configure the following properties: - [api key](https://www.tiny.cloud/my-account) - [plugins](https://www.tiny.cloud/docs/integrations/webcomponent/#loadingplugins) - [toolbar](https://www.tiny.cloud/docs/integrations/webcomponent/#settingthetoolbar) - [toolbar mode](https://www.tiny.cloud/docs/integrations/webcomponent/#settingthetoolbarmode) - [menubar](https://www.tiny.cloud/docs/integrations/webcomponent/#settingthemenubar) - [context menu](https://www.tiny.cloud/docs/integrations/webcomponent/#settingcontextmenu) - [content css](https://www.tiny.cloud/docs/integrations/webcomponent/#settingcontentstylesheets) - [content style](https://www.tiny.cloud/docs/integrations/webcomponent/#settingcontentstyling) - [width](https://www.tiny.cloud/docs/integrations/webcomponent/#settingtheeditorwidth) - [height](https://www.tiny.cloud/docs/integrations/webcomponent/#settingtheeditorheight) - [resize](https://www.tiny.cloud/docs/integrations/webcomponent/#showingresizehandles) - [skin](https://www.tiny.cloud/docs/integrations/webcomponent/#settingtheeditorskin) - [icon](https://www.tiny.cloud/docs/integrations/webcomponent/#settingtheiconpack)
Online