vue.js - 如何将 CKEditor 与 Nuxt.js 一起使用 - 窗口未定义错误

Question

在 Vue.js 中，这是我使用的设置。在 Nuxt.js 中，我收到“窗口未定义”错误。

根据我的研究，看来我必须为此关闭 SSR，并且也许使用插件设置。但我无法让它像那样工作。

但我不太确定该怎么做。我在网上尝试了几个示例，但没有一个起作用。

有人可以告诉我如何解决这个问题吗？

import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline'
import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
import SubscriptPlugin from '@ckeditor/ckeditor5-basic-styles/src/subscript'
import SuperscriptPlugin from '@ckeditor/ckeditor5-basic-styles/src/superscript'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment'
import ListPlugin from '@ckeditor/ckeditor5-list/src/list'

export default {
    name: 'Contents',
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            updated_since_last_save: false,
            last_build_type: '',
            last_parent: '',
            editor: ClassicEditor,
            editorConfig: {
                plugins: [
                    EssentialsPlugin,
                    AutoformatPlugin,
                    HeadingPlugin,
                    BoldPlugin,
                    ItalicPlugin,
                    UnderlinePlugin,
                    StrikethroughPlugin,
                    SubscriptPlugin,
                    SuperscriptPlugin,
                    LinkPlugin,
                    ParagraphPlugin,
                    AlignmentPlugin,
                    ListPlugin
                ],
                toolbar: {
                    items: [
                        'heading',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'subscript',
                        'superscript',
                        'link',
                        'undo',
                        'redo',
                        'alignment',
                        'bulletedList',
                        'numberedList'
                    ]
                }
            }
        }
    }

更新:

我添加了<client-only>模板中 ckeditor 组件周围的标签。我仍然遇到同样的错误。然后我尝试这样做:

添加plugins: [{ src: '~/plugins/ckeditor', mode: 'client' }],至nuxt.config.js 。

我添加了一个名为 ckeditor.js 的插件文件其中包含

import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'
Vue.use(CKEditor)

然后我刚刚更改了页面内导入的第一行:

import CKEditor from 'ckeditor'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline'
import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
import SubscriptPlugin from '@ckeditor/ckeditor5-basic-styles/src/subscript'
import SuperscriptPlugin from '@ckeditor/ckeditor5-basic-styles/src/superscript'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment'
import ListPlugin from '@ckeditor/ckeditor5-list/src/list'

export default {
    name: 'Contents',
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            updated_since_last_save: false,
            last_build_type: '',
            last_parent: '',
            editor: ClassicEditor,
            editorConfig: {
                plugins: [
                    EssentialsPlugin,
                    AutoformatPlugin,
                    HeadingPlugin,
                    BoldPlugin,
                    ItalicPlugin,
                    UnderlinePlugin,
                    StrikethroughPlugin,
                    SubscriptPlugin,
                    SuperscriptPlugin,
                    LinkPlugin,
                    ParagraphPlugin,
                    AlignmentPlugin,
                    ListPlugin
                ],
                toolbar: {
                    items: [
                        'heading',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'subscript',
                        'superscript',
                        'link',
                        'undo',
                        'redo',
                        'alignment',
                        'bulletedList',
                        'numberedList'
                    ]
                }
            }
        }
    }

我也遇到了同样的错误:

This dependency was not found: 
* ckeditor in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/admin/contents/_project_id/_id.vue?vue&type=script&lang=js&

Answer 1

您必须使用仅客户端组件包围您的组件，以便 nuxt 知道该组件只需要在客户端呈现。

docs