If you use start with ./, then the files should be found inside the /frontend folder in your project. As you are using files from an npm package, you should use the other format.
@JsModule("tinymce/tinymce.js") correctly includes tinymce.js in the bundle.
A theme can be loaded using @JsModule("tinymce/themes/silver/index.js")
Skins are loaded from /skins by default it says on the page and using their quick approach by copying files means
cp -R node_modules/tinymce/skins src/main/webapp/
The frontend folder in the project is a source folder and it is never deployed, so you cannot refer to it in the browser using base_url: '../node_modules/tinymce'. Everything in src/main/webapp is deployed so if you copied the files as mentioned above, you can use base_url: 'http://localhost:8080/'"
Hi Daniel Labcube,
I think you have solved the problem. I have been struggling with this problem and finally got a dirty solution. The help of the ideas of Artur Signell in this post and in [this one]
(https://vaadin.com/forum/thread/17942059/17942343) are very very important for me
Here is what I have done:
I have seen that the @NpmPackage(value = “tinymce”, version = “5.0.15”) has generated a folder in the node_modules folder called “tinymce”.
I have created a new folder inside frontend called “tinymceEdu” and I have copied the folder “themes” from the “node_modules/tinymce”, so I have the folder “frontend/tinymceEdu/themes”
I have copied the folder “skins” from the “node_modules/tinymce” to src/main/webapp, so I have the folder “src/main/webapp/skins”
I have created this js file (tinymce-test.js) inside frontend directory to attach the tinymce.init() function to the window object so that it can be global.
import * as TINY from "tinymce";
window.initTinymce = function() {
tinymce.init({selector:'textarea'});
}
Get your class and modify some aspects. Her is the code
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]
}
}
Apart from the name of the class, 5 minor changes have been made.
7.Now the main class:
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);
}
}
And is working!
Here is where the files are:
in src/main/java/com/gmail/ximo:
MainView1.java
TinyMce.java
in frontend:
tinymce-test.js
tinymceEdu/themes/* //Copied from the node_modules/tinymce/themes
in src/main/webapp
skins/* //Copied from the node_modules/tinymce/skins