# 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)