how to add plugins of ckeditor in nuxt with ssr

问题

i am trying to add Alignment plugins of ckeditor 5 in my nuxt app which is universal (SSR)

i tried like this in plugins


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);

i also tried direct import to page like this

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

getting error

Unexpected identifier

Normal editorConfig is working fine

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

回答1:

You can import/render CKEditor on client side only using workaround with plugin included on client side only which register component for editor

nuxt.config

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

ssr=false makes plugin not to be included in server side build

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)

And finally import CKEditor in RichEditor wrapper.

RichEditor.js

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

On server side will be empty div which will be rendered as CKEditor on client side.

Alternativelly you can register in your plugin.

回答2:

best option i finally found than make own custom build npm package and use it like same

来源：https://stackoverflow.com/questions/55991788/how-to-add-plugins-of-ckeditor-in-nuxt-with-ssr

标签

nuxt.js

nuxt

ckeditor5