在 phoenix LiveView 中使用外部庫

Question

我正在嘗試將 WYSIWYG-Editor tinymce 與包含 textarea 字段的 phoenix LiveView 集成。 在使用 LiveView 之前，我將它作為 node_module 庫導入到 app.js 文件中

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

然后通過初始化它

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

為了能夠驗證模板中的表單輸入，我將其轉換為一個 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-plugin 就不再工作，並且只剩下一個基本的 textarea 字段，在該字段上執行預期的驗證。

有沒有辦法將此外部庫加載到 LiveView 中？ 我試圖通過鈎子調用包含 tinymce.init 步驟的 function

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

但這不起作用。 有誰知道這個問題的解決方案？

Answer 1

您可以將鈎子連接到元素上。 像這樣的東西：

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

並在mounted中初始化它：

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

了解有關客戶端掛鈎的更多信息： https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks