如何在Nuxt.js中使用CKEditor-未定义窗口错误

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'
                    ]
                }
            }
        }
    }

Answer 1

您必须用client-only组件包围您的组件，以便nuxt理解该组件只需要在客户端呈现]]

docs