0. Introduction
Now that I have tried to use
TinyMce in my Vaadin projects, but integrating with Vaadin 14 is rather difficult because the component tries to find themes and skins and cannot find them. This maybe can be due to the shadow dom, which can encapsulate most of the code so that variables and paths get local and cannot be accessed.
The main ideas of this post are from the
Vaadin forum.
The steps to follow are:
1. Create a js file to get the function
tinymce.init() global so that it can be accessed by the Vaadin component. this file will be put in the
frontend folder. Remember that to make a function global, it should be incorporated into the "
window" object.
2. Create the component class with the
@NpmPackage annotation to import the
tinymce module from npm
3. Execute the build process so that the npm_modules folder will be filled with the npm dependencies. If you, instead of executing the build process, execute Run As-> Run on server, then you will get an error that cannot find the "./tinymceEdu/themes/silver.index.js". To solve this error, you should comment the line 18 that tries to import this module by means of the @JsModule annotation.
4. Copy the folder npm_modules/tinymce/
skins to src/main/webapp folder and we will get the folder
src/main/webapp/skins.
5. Create a folder "tinymceEdu" (or any other name different from "tinymce") in the folder frontend.
6. Copy the folder npm_modules/tinymce/themes to the last folder, getting
frontend/tinymceEdu/themes folder
7. Create the main form and include this component
1. The js file
I have called it
tinymce-test.js . It will be placed in the "
frontend" folder
1
2
3
4
5
| import * as TINY from "tinymce";
window.initTinymce = function() {
tinymce.init({selector:'textarea'});
}
|
2. The component class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| package com.gmail.ximo;
import java.util.UUID;
import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
@SuppressWarnings("serial")
//Our js file used to make the library functions global
@JsModule("./tinymce-test.js") // New! [1]
//Theme
@JsModule("./tinymceEdu/themes/silver/index.js") // Modified! [2]
//Npm
@NpmPackage(value = "tinymce", version = "5.2.1") // Modified! [3]
@Tag("textarea")
public class TinyMce extends CustomField<String> {
public TinyMce(){
this.setId(UUID.randomUUID().toString());
}
@Override
protected String generateModelValue() {
return getElement().getText();
}
@Override
protected void setPresentationValue(String s) {
getElement().setText(s);
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
this.getElement().executeJs("window.initTinymce()"); //Modified [4]
this.setWidth("500px"); // Modified [5]
}
}
|
Line 12: references the file"
tinymce-text.js" so that we can use the "
window.initTinymce()" function declared in this js file. The execution of this function is in line 38.
Line 15: references the copied folder themes from
npm_modules/tinymce/themes to
frontend/tinymceEdu/themes
Line 18: the reference to the tinymce package from the npm repository
Line 19: the tag used in html
Line 38: The use of the function tinymce.init() which has been "globalized" in the "tinymce-test.js" file passing it to the window object
3. The main view class
Here is the simple code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| package com.gmail.ximo;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import javax.annotation.PostConstruct;
/**
* The main view contains a simple label element and a template element.
*/
@SuppressWarnings("serial")
@Route("")
@PWA(name = "Project Base for Vaadin Flow with CDI", shortName = "Project Base")
public class MainView1 extends VerticalLayout {
@PostConstruct
public void init() {
TinyMce tiny= new TinyMce();
add(tiny);
}
}
|
Now you can run it (if you use the start-up project from Vaadin as Run As- Maven Build.. - Goals : "
clean package tomee:run" or Run -Run on Server ... if you are using Tomcat server and have configured the pom.xml as in
this post).
Happy coding!
