Как использовать CKEditor с Nuxt. js - в окне не определена ошибка - PullRequest
Новая
       112

Как использовать CKEditor с Nuxt. js - в окне не определена ошибка

0 голосов
/ 30 апреля 2020

В Vue. js, это настройка, которую я использовал. В Nuxt. js Я получаю сообщение об ошибке «Окно не определено».

Исходя из моих исследований, похоже, что для этого мне нужно отключить SSR и, возможно, использовать настройку плагина. Но я не смог заставить его работать так.

Но я не совсем уверен, как go об этом. Я попробовал пару примеров в Интернете, но ни один из них не сработал.

Может кто-нибудь сказать мне, как это исправить? 

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&

1 Ответ

1 голос
/ 30 апреля 2020

вы должны окружить свой компонент компонентом только для клиента , чтобы nuxt понимал, что этот компонент должен отображаться только на стороне клиента

документы

...