如何在 Nuxt 中使用 TinyMCE？答案

【问题标题】：How to use TinyMCE in Nuxt?如何在 Nuxt 中使用 TinyMCE？
【发布时间】：2021-06-02 19:30:44
【问题描述】：

我想将此脚本添加到我的 Nuxt 代码中：

<script>
  tinymce.init({
    selector: "#mytextarea",
    plugins: "emoticons",
    toolbar: "emoticons",
    toolbar_location: "bottom",
    menubar: false
  });
</script>

我可以把它扔到我的组件的模板主体中（这个脚本必须在<body>而不是<head>）像这样：

有趣的是，它确实有效，但这里有两个问题：

看起来很丑
它不是动态的。例如，我不能将selector 动态绑定到道具或数据属性！它必须是硬编码的。

所以我想知道是否有人知道如何将这些脚本正确地集成到我的 Nuxt 项目中？

【问题讨论】：

标签： javascript vue.js tinymce nuxt.js script-tag

【解决方案1】：

我真的很怀疑这是否有效。 Vue 总是忽略模板中的任何 <script> 标记并显示错误消息：

模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如<script>，因为它们不会被解析。

没有理由将它放入模板中。它只是您可以作为组件生命周期的一部分执行的常规 JS 代码。下面是将 TinyMCE 集成到 Vue 应用程序中的非常简单的组件包装器。

但是我不建议自己这样做，而是使用official Vue wrapper (docs) - 将v3 用于 Vue 2。官方集成处理所有边缘情况，如组件激活/停用（与<keep-alive> 一起使用时）并在组件被销毁时进行适当的清理，以避免nasty memory leaks

const ed = Vue.component("MyEditor", {
  props: ["id", "value"],
  template: `
    <div>
      <textarea :id="id" :value="value"></textarea>
    </div>
  `,
  mounted() {
    const me = this;
    window.tinymce.init({
      selector: "#" + this.id,
      plugins: "emoticons",
      toolbar: "emoticons",
      toolbar_location: "bottom",
      menubar: false,
      setup: function (editor) {
        editor.on("change input undo redo", function () {
          me.$emit('input', editor.getContent({format: 'text'}))
        });
      }
    });
  }
});

Demo

努克斯

由于 TinyMCE 完全是 JS 渲染的，所以在服务器端渲染期间执行它是没有意义的。事实上，上面的代码在服务器上根本不起作用，因为没有window 变量。使用 Nuxt 的 <client-only> component 强制 Nuxt 仅在客户端渲染编辑器...

更新：另一方面，在 SSR 期间根本不会调用 mounted 生命周期钩子，因此即使没有 <client-only> 也可能会正常工作

【讨论】：

它确实有效。谢谢。但是，您能给我解释一下setup: function (editor) 部分吗？它有什么作用，为什么我们需要在其中添加它？
是的，我知道它有效，但正如我所说，不要使用我的代码。它缺少非常重要的部分 - 当组件被破坏时破坏编辑器。我可以添加它，但如果 TinyMCE 的作者对 Vue 进行了官方集成，这似乎是浪费时间。更了解他们的编辑......
setup 是 TinyMCE 调用的函数。它对于设置事件处理程序很有用。在我的示例中，我处理更改编辑器内容时发出的事件，以便发出 Vue input 事件 - 这使得组件上的 v-model 工作......
啊哈是有道理的。我想集成更多来自其他来源的脚本，其中大部分没有 Vue 的官方集成。你建议我如何继续整合它们？