как добавить плагины ckeditor в nuxt с ssr

Я пытаюсь добавить плагины выравнивания ckeditor 5 в свое универсальное приложение nuxt (SSR)

я пробовал это в плагинах


import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

// import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; <-- not working


const options = {

    editors: {
        classic: ClassicEditor,

    },
    name: 'ckeditor'
}

Vue.use(VueCkeditor.plugin, options);

Я также пробовал прямой импорт на такую ​​страницу

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

получение ошибки

Неожиданный идентификатор

Нормальный editorConfig работает нормально

editorConfig: {

      image: {

        toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight'],

                styles: [

                'full',


               'alignLeft',


               'alignRight'
           ]
         },
         alignment: {
           options: [ 'left', 'right' ]
         },
         toolbar: {
           items: [
            'heading',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'insertTable',
            'imageUpload',
            'mediaEmbed',
            'alignment'
          ]
       }
    },

nuxt.js ckeditor5
person sid heart    schedule 05.05.2019    source источник
comment
Показать полную ошибку   -  person Aldarund    schedule 05.05.2019
comment
@Aldarund prntscr.com/nkn8bm   -  person sid heart    schedule 05.05.2019
comment
Вероятно, вам нужно перекомпилировать его nuxtjs.org/api/configuration-build/#transpile   -  person Aldarund    schedule 05.05.2019
comment
@Aldarund, я никогда не использую это, и я не знаю, что это такое, ты можешь сказать мне, как это исправить? Благодарность   -  person sid heart    schedule 05.05.2019
comment
Я сказал вам, попробуйте добавить его в вариант транспиляции. U - это базовый импорт из источников, которые были перенесены. тебе нужно сначала их скомпилировать   -  person Aldarund    schedule 05.05.2019

Ответы (2)


arrow_upward
1
arrow_downward

лучший вариант, который я наконец нашел, чем создать собственный пакет npm для сборки и использовать его так же

person sid heart    schedule 16.09.2019

arrow_upward
1
arrow_downward

Вы можете импортировать / отображать CKEditor на стороне клиента только с помощью обходного пути с плагином, включенным только на стороне клиента, который регистрирует компонент для редактора

nuxt.config

plugins: [
  { src: '~/plugins/rich-editor', mode: 'client' },
],

ssr = false запрещает включение плагина в сборку на стороне сервера

plugins / rich-editor.js

import Vue from 'vue'
import RichEditor from '@/components/RichEditor'

// register component from plugin to bypass SSR
Vue.component('rich-editor', RichEditor)

И, наконец, импортируйте CKEditor в оболочку RichEditor.

RichEditor.js

import CKEditor from '@ckeditor/ckeditor5-vue';

На стороне сервера будет пустой div, который будет отображаться как CKEditor на стороне клиента.

Или вы можете зарегистрироваться в своем плагине.

person farincz    schedule 27.09.2019
comment
Это работает хорошо, но знаете ли вы, почему, когда я перезагружаю страницу (Cmd + R, полная перезагрузка), я получаю, что окно не определено? И не первый раз захожу на страничку. - person Skoua; 11.03.2020
comment
@Skoua Я думаю, вы случайно импортировали редактор на стороне сервера. - person farincz; 12.03.2020