如何在 Nuxt 中使用 TinyMCE？

问题描述

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

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

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

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

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

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

解决方法

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

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

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

但是我不建议自己这样做，而是使用 official Vue wrapper (docs) - 对于 Vue 2 使用 v3。官方集成处理所有边缘情况，例如组件激活/停用（与 <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

Nuxt

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

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

javascript nuxt.js script-tag tinymce vue.js

如何在 Nuxt 中使用 TinyMCE？

问题描述

解决方法

Nuxt

相关问答