时间戳

首页 > 解决方案 > 在 phoenix LiveView 中使用外部库

elixir - 在 phoenix LiveView 中使用外部库

问题描述

我正在尝试将 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 步骤的函数

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

但这不起作用。有谁知道这个问题的解决方案？

标签： elixirtinymcephoenixphoenix-live-view

解决方案

您可以将钩子连接到元素上。像这样的东西：

<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

推荐阅读