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

Posted 2023-02-22

【中文标题】如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

【英文标题】：How to use CKEditor with Nuxt.js - window is not defined error

【发布时间】：2020-08-15 03:00:36

【问题描述】：

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

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

但我不太确定该怎么做。我在网上尝试了几个例子，但都没有奏效。

谁能告诉我如何解决这个问题？

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

更新：

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

将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&

【问题讨论】：

在客户端导入ckeditor包。在这里查看我的答案：***.com/a/69985388/10567990

【参考方案1】：

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

docs

【讨论】：

我已尽我所能遵循这些文档。 （现在）。我现在收到一个错误'找不到模块'ckeditor''。我可能做错了插件，但我不知道如何修复它。