如何使用ssr在nuxt中添加ckeditor的插件

Question

我正在尝试在我的通用 (SSR) nuxt 应用程序中添加 ckeditor 5 的对齐插件

我在插件中试过这样


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

获取错误

Unexpected identifier

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

Answer 1

我终于找到了最好的选择，而不是制作自己的自定义构建 npm 包并像使用它一样使用它

Answer 2

您可以 import/render 客户端的 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)

最后在 RichEditor 包装器中导入 CKEditor。

RichEditor.js

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

在服务器端将为空 div，在客户端将呈现为 CKEditor。

或者您可以在您的插件中注册。

如何使用ssr在nuxt中添加ckeditor的插件

how to add plugins of ckeditor in nuxt with ssr

nuxt.js

ckeditor5