vue.js 如何在Nuxt中使用TinyMCE?

62lalag4  于 2022-12-04  发布在  Vue.js
关注(0)|答案(2)|浏览(314)

我想把这个脚本添加到我的Nuxt代码中:

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

我可以直接将它放入组件的模板主体中(此脚本必须在<body>中,而不是<head>中),如下所示:

有趣的是,它是有效的,但这里有两个问题:
1.看起来很丑
1.它不是动态的。例如,我不能将selector动态绑定到prop或data属性!它必须是硬编码的。
所以我想知道是否有人知道我如何将这样的脚本正确地集成到我的Nuxt项目中?

iqjalb3h

iqjalb3h1#

  1. Vue总是忽略模板中的任何<script>标记,并显示错误消息:
    模板应该只负责将状态Map到UI。避免在模板中放置具有副作用的标记,例如<script>,因为它们不会被解析。
    1.没有理由把它放到模板中。它只是一个普通的JS代码,你可以把它作为组件生命周期的一部分来执行。下面是非常简单的组件 Package 器,它把TinyMCE集成到Vue应用程序中。
    但是,我不建议您自己执行此操作,而是使用official Vue wrapperdocs)-对于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

下一步

由于TinyMCE是完全JS渲染的,在服务器端渲染时执行它没有意义。实际上,由于没有window变量,上述代码在服务器端根本无法工作。使用Nuxt的<client-only>组件强制Nuxt只在客户端渲染编辑器...
更新:另一方面,在SSR期间根本不调用mounted生命周期钩子,因此即使没有<client-only>,这可能也会正常工作

wlwcrazw

wlwcrazw2#

正如在接受的答案中提到的,官方的VUE包是要走的路。即使有官方的包,一旦我把它拉进NUXT,也有很多问题。
下面是我如何让它工作的一步一步的步骤。下面是涉及到的所有内容的版本:

"tinymce": "^5.10.3",
    "@tinymce/tinymce-vue": "^3.2.8",
    "vue": "^2.6.11",
    "nuxt": "2.15.8",

tinymce-vue包需要一个可用的tinymce。你可以像上面一样通过npm安装它,或者使用云托管的版本(见这里的先决条件)。

Nuxt特定问题

您需要确保组件包含在<client-only>标签中,以避免SSR错误。
另外,如果tinymce包是自托管的,你只需要在客户端导入它,否则你会看到如下错误:[Vue warn]: Failed to resolve async component: ... Reason: ReferenceError: navigator is not defined
可以通过在它们周围使用requireif (process.client) {来实现这一点。
例如:

if (process.client) {
  require('tinymce/tinymce')
  require('tinymce/themes/silver')
  require('tinymce/icons/default')
  require('tinymce/plugins/lists') // do this for any plugins you use on the editor
}

import Editor from '@tinymce/tinymce-vue'

此时,编辑器应该加载到页面上,但样式可能没有加载。
您可以通过在其他require下添加require('tinymce/skins/ui/oxide/skin.min.css')来解决此问题。
现在的样式将被修复,但tinymce主题仍将寻找其他CSS文件,如移动的,最小版本本身,并导致网络错误。
例如:

404 http://localhost:3000/_nuxt/skins/ui/oxide/content.min.css
404 http://localhost:3000/_nuxt/skins/ui/oxide/skin.min.css

**对于内容:**您可以将该文件复制到具有相同路径的静态文件夹中,也可以使用content_css设置覆盖它们(在Vue组件init选项中)。
**对于皮肤:**由于您已经将其作为模块提供,请在Vue组件init选项中设置skin: false

2022年11月29日更新:已修复排印错误

相关问题