CKEditor5：无法读取未定义的 属性 'pluginName'

Question

我正在尝试为 CKEditor 制作一个自定义图像插件，它与我定制的图像上传系统集成。主要是，我 运行 在设置这个插件时遇到了问题。当我加载 "out-of-the-box" 插件时，一切正常（另外，当我删除自己的插件时，一切又像以前一样工作）。

我收到以下控制台错误：

main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322 TypeError: Cannot read property 'pluginName' of undefined
    at new ga (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:360)
    at new Ul (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:521)
    at new Lc (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at new pp (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1318)
    at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at new Promise (<anonymous>)
    at Function.create (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:643)
    at Module.<anonymous> (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1322)
    at n (main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1)
    at main.511663b82f6b3e2bb9df.js?2754ab1fde8ef5d8fd3d:1

我找不到关于 属性 pluginName 的任何信息，除了 documentation over at CKEditor 的以下摘录：

pluginName : String | undefined

An optional name of the plugin. If set, the plugin will be available in get by its name and its constructor. If not, then only by its constructor.

The name should reflect the constructor name.

To keep the plugin class definition tight it is recommended to define this property as a static getter:

export default class ImageCaption {
    static get pluginName() {
        return 'ImageCaption';
    }
}

Note: The native Function.name property could not be used to keep the plugin name because it will be mangled during code minification.

将此函数插入​​到我的插件代码中不起作用，所以我有点迷失在这里可能是什么问题。我在下面包含了我的代码。我已经根据CKEditor advanced setup, first option，在Webpack中制作了它。

我是不是遗漏了什么，或者我的代码有问题？

---

index.js

import ClassicEditor from './ckeditor'; // ckeditor.js in the same folder
import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
require("./css/index.css");
ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#editor' ))
    .then( editor => {
      editor.commands.get( 'imageStyle' ).on( 'execute', ( evt, args ) => {
          // ...
          // this snippet of code works; it concerns hooking into the default image plugin
          // ...
      } );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

ckeditor.js

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

import ImageLibrary from './js/image-library.js'; // file containing the code for my custom plugin

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    EssentialsPlugin,
    UploadAdapterPlugin,
    AutoformatPlugin,
    BoldPlugin,
    ItalicPlugin,
    Highlight,
    MediaEmbed,
    Table,
    TableToolbar,
    ImagePlugin,
    ImageCaptionPlugin,
    ImageStylePlugin,
    ImageToolbarPlugin,
    ImageUploadPlugin,
    LinkPlugin,
    ListPlugin,
    ParagraphPlugin,
    ImageLibrary // my custom plugin
];

ClassicEditor.defaultConfig = {
  highlight: {
        options: [
          {
                model: 'redPen',
                class: 'pen-red',
                title: 'Red pen',
                color: '#DD3300',
                type: 'pen'
            },
            {
                model: 'bluePen',
                class: 'pen-blue',
                title: 'Blue pen',
                color: '#0066EE',
                type: 'pen'
            },
            {
                model: 'greenPen',
                class: 'pen-green',
                title: 'Green pen',
                color: '#22AA22',
                type: 'pen'
            }
        ]
    },
    toolbar: {
        items: [
            //'heading',
            //'|',
            'bold',
            'italic',
            'link',
            'highlight:redPen', 'highlight:greenPen', 'highlight:bluePen', 'removeHighlight',
            '|',
            'bulletedList',
            'numberedList',
            '|',
            'mediaembed',
            'inserttable',
            '|',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:alignCenter',
            '|',
            'imageTextAlternative'
        ],
        styles: [
          'full','alignCenter'
        ]
    },
    table : {
      contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
    },
    language: 'nl'
};

图片-library.js

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
import Command from '@ckeditor/ckeditor5-core/src/command';

class RoodCMSImageCommand extends Command {
    static get requires() {
        return [ ModelElement ];
    }
    execute( message ) {
      console.log(message);
    }
}
class ImageLibrary extends Plugin {
    static get requires() {
        return [ ModelElement ];
    }
    static get pluginName() {
        return 'ImageLibrary';
    }
    init() {
        // Initialize your plugin here.
        const editor = this.editor;
        console.log("plugin initialized.",editor);
    }
}

---

更新：解决方案基于 Maciej Bukowski 的回答

Maciej 指出 class ImageLibrary（我尝试导入）缺少 export。我很容易忽略的一点是，每当您 importing 某些东西时，您也必须 export 它，否则它将不可用。关键字 export default 对我有用。

罪魁祸首在 image-library.js 中，为此我更改了以下行：

class ImageLibrary extends Plugin {
    // ... this failed, as it missed the `export default` keywords
}

进入以下：

export default class ImageLibrary extends Plugin {
    // ... works, as I properly export what I want to import.
}

Answer 1

import ImageLibrary from './js/image-library.js';

您没有从文件中导出该库，因此出现错误 Cannot read property 'pluginName' of undefined。 ckeditor.js 中的 ImageLibrary 变为 undefined，因为它在 image-library 文件中找不到。