时间戳

首页 > 解决方案 > 如何在 Nuxt 中使用 TinyMCE？

javascript - 如何在 Nuxt 中使用 TinyMCE？

问题描述

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

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

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

在此处输入图像描述

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

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

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

标签： javascriptvue.jstinymcenuxt.jsscript-tag

解决方案

  1. 我真的很怀疑这是否有效。Vue 总是忽略<script>模板中带有错误消息的任何标签：

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

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

但是，我不建议您自己执行此操作，而是使用官方 Vue 包装器（文档） - 将v3用于 Vue 2。官方集成处理所有边缘情况，如组件激活/停用（与 一起使用时<keep-alive>）和组件时的正确清理为避免严重的内存泄漏而需要销毁

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'}))
        });
      }
    });
  }
});

演示

纽斯特

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

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

推荐阅读