Directory

TinyMCEeditorForVaadin

Vaadin adapter for TinyMCE rich text format editor

TinyMCE RTFeditor realized as a webcomponent

Sample code

TinyMCEeditor theAddon = new TinyMCEeditorBuilder()
                .setInnerHTML("<p>Hello world</p>") //some html that should be on startview
                .setApiKey("asfksfasakfslafkflsasadj")
                .setHeight("20em")
                .setMenubar(MENU_CODEFORMAT)
                .setToolbar(TOOLBAR_BOLD, TOOLBAR_COPY, TOOLBAR_CUT, TOOLBAR_CODE, TOOLBAR_ALIGNCENTER)
                .setPlugins(PLUGIN_ADVLIST, PLUGIN_ANCHOR, PLUGIN_TABLE)
                .createTinyMCEeditor();
        Button get = new Button("getValue", l -> System.out.println(theAddon.getValue()));
        Button set = new Button("set", l -> theAddon.appendStrValue("setValue"));
        add(theAddon, get, set);

It's needed to put file tinymce-loader.js to folder /frontend/src/ 
with following code:
    import { Editor } from '@tinymce/tinymce-webcomponent';

TinyMCEeditor tinyMCEeditor = new TinyMCEeditorBuilder()
        .setInnerHTML(value != null ? new String(value.getData()) : "")
        .setApiKey("asfksfasakfslafkflsasadj")
        .setMenubar("false")
        .setToolbar(TOOLBAR_FONTFAMILY, TOOLBAR_FONTSIZE, TOOLBAR_BOLD, TOOLBAR_ITALIC, TOOLBAR_UNDERLINE, TOOLBAR_BACKCOLOR, TOOLBAR_FORECOLOR, TOOLBAR_ALIGNLEFT, TOOLBAR_ALIGNCENTER, TOOLBAR_ALIGNRIGHT)
        .setSerializableConsumer(s-> {
          ((TinyMCEeditor)getEditorComponent()).setValue(new BlobByteArray(s.getBytes()));
        })
        .createTinyMCEeditor(BlobByteArray.class //Keep it empty will call constructor with String type);
//Where s is String that TinyMCE excpect to put in editor.

Links

• View on GitHub
• Source Code

Compatibility