Library to use TinyMCE with Vaadin LTS

Use the current TinyMCE community edition in your Vaadin application. The component provides a clean integration of the popular web editor with the recent Vaadin LTS 14+ libraries.
Allows to easily configure a lot of the options that the editor supports out of the box via an intuitive java api. Both, self hosted deployment and usage via the api key is supported. The use of a commercial license with additional plugins, themes is of course also possible via the api key.

TinyMCE running with Vaadin
Example in a Browser

Benefit from the offering price with one year updates and support:
Login (via E-Mail, Google or Github) to get your copy or use the quick check-in.

Save the time of integrating the editor as a component yourself and avoid problems of correctly loading and initializing it.
Check the functionality in the example showing how the TinyMCE editor is integrated with Vaadin via the library. The full source code and working examples are included in the distribution, the library is tested to work with the Vaadin LTS version 14.

Usage

To get you started, just a few steps are necessary.

  1. Add a project dependency to the editor class.
    <dependency>
        <groupId>com.weebmeister.editor</groupId>
        <artifactId>lib-editor-tinymce-vaadin</artifactId>
        <version>1.2.0</version>
    </dependency>
  2. Optional: If you want to self-host also add the wrapper project lib-tinymce-resources as a dependency,
    otherwise (in case you don’t have it already) obtain the api-key from tiny.cloud.
  3. Include the web editor control in your view class and use setValue / getValue to assign or read the editor content.
    tinyMCE = new TinyMCE();
    tinyMCE.setApiKey("-- your api key here --");
    
    TinyOptions tinyOptions = new TinyOptions();
    
    tinyMCE.setTinyOptions(tinyOptions);
    tinyMCE.setWidth("100%");
    tinyMCE.setHeight("400px");
    
    tinyMCE.setValue("<h2>Example</h2>");
    add(tinyMCE);

Run your application and have one of the best wysiwyg-editors of the web at your fingertips.

There are two component classes that may be added as an editor control, TinyMCE and TemplateEditor which extends from the base editor and adds useful menus with variables to support Apache Velocity features for template editing.

Supported Versions

Library version 1.2.0 is configured with Vaadin 14.6.8 (long-term support), TinyMCE 5.8.2 and Spring Boot 2.5.3.
Frequent updates are performed to keep up with the ongoing development. If the content delivery network is used, newer versions of the Javascript library can be configured.

Limitations

Due to a different operation mode in the web-browser, the editors’ functionality currently cannot be used in a Vaadin dialog component.

Project Modules

Sources

  • lib-editor-tinymce-vaadin contains the TinyMCE class and accompanying configuration objects
  • lib-editor-tinymce-templates TemplateEditor extends TinyMCE and enhances it by depending on the Apache Velocity Engine to
    create more complex javascript setups. It provides menus with configurable placeholders.The user can e.g. select ‘Address > Street’ and ${address.street} is inserted in the editor which is then used for further processing the edited text by Velocity.

Project structure

  • lib-editor-tinymce-vaadin contains the software layer to use the editor in the Vaadin environment.
  • lib-editor-tinymce-templates is an extension that has configurable menus based on meta data from the application.
  • lib-tinymce-resources is an optional LGPL-licensed library that wraps the TinyMCE javascript sources.
  • example-simple Usage example (see below)
  • example-apikey Usage example (see below)
  • example-localized Usage example (see below)
  • example-themes Usage example (see below)
  • distribution Contains the packaging

Examples

Note on running the examples from an IDE: Since this is a multi-module maven project, Vaadin currently doesn’t detect the project directory during WebPack compilation. Please set the ‘Working directory’ via Run > Edit configurations to the particular project root instead.

  • example-simple This is a simple example to get started that just has the minimum required additions needed for the
    Spring and Vaadin project to have an operational TinyMCE available.
  • example-apikey This project is your starting point if you either want to load the scripts directly from the origin or plan to use the commercial features of TinyMCE. Shows how to integrate with cdn.tiny.cloud and load the editor JavaScript remotely. A freely available api-key needs to be obtained (here).
  • example-localized Shows how to configure or switch the locale of the editor and how to provide the language packages.
    Languages are available from https://www.tiny.cloud/get-tiny/language-packages/ (community editions).
  • example-themes Example application to use the theme api and switch between themes. Themes can be created via a theme editor at https://skin.tiny.cloud/t5/.

Running the examples

The project is a standard Maven project. To run it from the command line,
type mvnw (Windows), or ./mvnw (Mac & Linux), then open https://localhost:8080 in your browser.

You can also import the project to your IDE of choice as you would with any Maven project.

Deploying to Production

To create a production build, call mvnw clean package -Pproduction (Windows),
or ./mvnw clean package -Pproduction (Mac & Linux).
The complete build will take about 2 minutes per example since WebPack is processing all Javascript modules.
This will build a JAR file with all the dependencies and front-end resources,
ready to be deployed. The file can be found in the target folder after the build completes.

Once the JAR file is built, you can run it using
java -jar target/myapp-1.0-SNAPSHOT.jar (NOTE, replace
myapp-1.0-SNAPSHOT.jar with the name of your jar).

License and thirdparty dependencies

This library provides a software layer to cleanly integrate the TinyMCE Editor (community edition) into the Vaadin ecosystem.

TinyMCE core editor is available freely under the GNU Lesser General Public License
If you want to make use of advanced features, additional plugins or themes you might want to consider obtaining a plan at www.tiny.cloud/pricing

Vaadin core components are licensed under the Apache License 2.0

The template extension in project lib-editor-tinymce-templates makes use of Apache Velocity which is also licensed under the Apache License 2.0.