Using TinyMCE (or other similar Javascript libraries)

Questions / Help
,
1

Hi,

I’m trying to get TinyMCE to work on a phoenix live view in it’s most simple way. I understand all the basics of JS hooks, but I’m struggling with getting TinyMCE to just install properly.

Note - Javascript and the whole webpack kind of ecosystem isn’t my strength.

After following installation instructions (essentially npm -i tinymce), then the install guide recommends putting a script tag in with a link to the node_module directly. This seems a bit odd since node_modules isn’t public, and generally most things in app.js using standard import X from Y notation.

I tried to import tinymce from tinymce which kind of works, but then a bunch of other stuff fails like trying to load secondary resources (which just 404).

My app.js

...
import tinymce from 'tinymce';

Hooks.TinyMCE = {
    mounted() {
        tinymce.init({
            selector: "#mytextarea", // just to test directly
            height: 500,
            plugins: [
            ],
            toolbar: 'undo redo | blocks | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
        });

    }
}

let liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    hooks: Hooks
})
...

Error i see in console

image
image968×199 42.5 KB

Any pointers on how to get this working properly? Do i need to just copy tinymce into a vendor directory and use direct via a script tag, or what am I missing?

thanks

2

I’ve found a way to make this work, but it doesn’t feel very clean.

I’ve copied the whole node_modules/tinymce into the priv/static/assets/tinymce folder, and updated the tinymce baseUrl to serve from there.

3

You can also try and use TinyMCE CDN website
https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/