Using external libraries in phoenix LiveView

Question

I am trying to integrate the WYSIWYG-Editor tinymce with a phoenix LiveView that contains textarea fields. Before using LiveView, I imported it as a node_module library into the app.js file

import tinymce from '../node_modules/tinymce/tinymce'

and then initialized it through

tinymce.init({
  selector: 'textarea',
  plugins: ...
})

In order to be able to validate the form inputs in a template, I transformed it into a LiveView which I serve through

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks});

//// Connect if there are any LiveViews on the page
liveSocket.connect();

as is customary. However, as soon as the LiveSocket is mounted, the tinymce-plugin does not work anymore and there remains only a basic textarea field on which the intended validation is carried out, nonetheless.

Is there a way to load this external library into the LiveView? I tried to call a function containing the tinymce.init step through a hook

let Hooks = {}
Hooks.LoadIt = {
  mounted() {
    tinyinit(tinymce)
  }
}

but this does not work. Does anyone know a solution to this problem?

Answer 1

You could attach your hook to the element. Something like this:

<textarea ... phx-hook="LoadIt" id="your-unique-id"></textarea>

And initialize it in mounted:

Hooks.LoadIt = {
 mounted() {
    tinymce.init({
     selector: this.el, # <- attribute referencing the bound DOM node.
     plugins: ...
    })
  }
}

Learn more about client hooks: https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks