Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Tiny MCE

Kare Jonsson
6 years ago Sep 26, 2015 10:36am
Matti Tahvonen
6 years ago Sep 26, 2015 7:08pm

Hi Kare,

Don't lose you hope, using client side additions in your application is probably the harderst part for you to learn.

I think the largest "mistake" you did was that you are trying to build the add-on by yourself. This is typically not needed as many Vaadin add-ons can be taken as prebuilt jars from the Directory service. In case of TinyMCE Wrapper, just add this dependency to your pom.xml file (I assume you are using Maven to build your project, if not I strongly suggest to use it, especially instead of plain ant+ivy).


Then, if you created the project using our maven archetype, just issue mvn clean install (can be done with IDE as well). This will then modify your application widgetset to contain the "client side counterpart" for the tiny mce server side component. After that just use the tiny mce editor instead of TextField and things should work as charm.

Let me know if you can't make it work, I can then verify the whole process myself. We are plannin to build some entry level tutorials and video material this autumn, so this is good information to me, to see what kind of obstacles developers typically face when they try Vaadin. Thanks!


Kare Jonsson
6 years ago Sep 26, 2015 10:46pm
Kare Jonsson
6 years ago Sep 27, 2015 8:59am
Kare Jonsson
6 years ago Sep 27, 2015 12:15pm
Matti Tahvonen
6 years ago Sep 27, 2015 1:06pm


Your problem is that the Addressbook example is not configured for client side extension. That is why I typically suggest to use our archetype or some more advanced example as a starting point, but adding support to it isn't that hard. Add this annotation to your UI class (AddressbookUI):


And this Maven plugin to your pom.xml (into build/plugings section

                    <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>

                            <!-- disabled by default to use on-the-fly theme compilation -->
                            <!-- <goal>compile-theme</goal> -->

That should do the trick!



Kare Jonsson
6 years ago Sep 27, 2015 7:36pm
Kare Jonsson
6 years ago Sep 27, 2015 9:33pm
Matti Tahvonen
6 years ago Sep 28, 2015 7:25am
Kare Jonsson
6 years ago Oct 12, 2015 12:12pm
Matti Tahvonen
6 years ago Oct 17, 2015 4:19pm
Kare Jonsson
4 years ago Nov 16, 2017 7:48pm
Kare Jonsson
4 years ago Nov 16, 2017 9:13pm

Hello again
Note that my post above was from debugging a problem that I at the time misunderstood. By googling I came to pages like the one above. The actual error was that the config was not balanced in []{} . Here is my soultion after hours of pain that you may appreciate.

private static final String tinymceconfig = 
    +"menubar: true, "
            +"plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern code help', "
            +"toolbar: 'insert | undo redo |  formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | code | help', "
    +"file: {title: 'File', items: 'newdocument'}, "
    +"edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'}, "
    +"insert: {title: 'Insert', items: 'link media | template hr'}, "
    +"view: {title: 'View', items: 'visualaid'}, "
    +"format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, "
    +"table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'}, "
    +"tools: {title: 'Tools', items: 'spellchecker code'} "