Elixir 在phoenix LiveView中使用外部库

我正在尝试将所见即所得编辑器tinymce与包含textarea字段的phoenix LiveView集成。在使用LiveView之前，我将其作为节点模块库导入到app.js文件中

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

然后通过

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

为了能够验证模板中的表单输入，我将其转换为LiveView，并通过LiveView提供服务

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();

按惯例。然而，一旦安装了LiveSocket，tinymce插件就不再工作，仍然只剩下一个基本的textarea字段，在该字段上执行预期的验证

有没有办法将这个外部库加载到LiveView中？我试图通过一个钩子调用一个包含tinymce.init步骤的函数

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

---

但这是行不通的。有人知道这个问题的解决方案吗？

您可以将钩子连接到元素上。大概是这样的：

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

并将其初始化为：

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

Hooks.LoadIt={
安装的（）{
tinymce.init({
选择器：this.el，#事实上，我是对的，但在其他地方犯了一个小错误。。。