NPM Component TinyMce not working

Flow
1

Hello Devs
Somebody knows why this is not working?

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;

import java.util.UUID;

@NpmPackage(value = "tinymce", version = "5.0.15")
@JsModule("./tinymce/tinymce.js")
@Tag("textarea")
public class WysiwygEditor extends CustomField<String> {
    public WysiwygEditor(){
        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);
        getElement().executeJs("tinymce.init({selector: '#" + this.getId().get() + "'});");
    }
}

and also with trying to figure out the paths somehow i can’t make it work…

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;

import java.util.UUID;

@NpmPackage(value = "tinymce", version = "5.0.15")
@JsModule("tinymce/tinymce.js")
@Tag("textarea")
public class WysiwygEditor extends CustomField<String> {
    public WysiwygEditor(){
        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);
        getElement().executeJs("tinymce.init({selector: '#" + this.getId().get() +"'" +
                ", base_url: '../node_modules/tinymce'" +
                "});");
    }
}

if i use @JSModule with ./ path i can not even build-frontend

thank you very much for your help.

2

if someone can help me out with getting tinymce5 working for vaadin 14+ that would be great.

3

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.

  1. @JsModule("tinymce/tinymce.js") correctly includes tinymce.js in the bundle.

Now if you look at https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/ you can see that you need two more things: theme and skins

  1. A theme can be loaded using @JsModule("tinymce/themes/silver/index.js")

  2. 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/'"

4

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:

  1. I have seen that the @NpmPackage(value = “tinymce”, version = “5.0.15”) has generated a folder in the node_modules folder called “tinymce”.
  2. 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”
  3. I have copied the folder “skins” from the “node_modules/tinymce” to src/main/webapp, so I have the folder “src/main/webapp/skins”
  4. 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'});
}
  1. 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]

    }
}
  1. 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);
    }
}
  1. And is working!
  2. 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

18201925.png