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

Question

我正在尝试为 CKEditor 制作一个自定义图像插件，它与我的自定义图像上传系统集成。主要是，我在设置这个插件时遇到了问题。当我加载“开箱即用”插件时，一切正常（此外，当我删除自己的插件时，一切都恢复正常）。

我收到以下控制台错误：

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

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

pluginName : 字符串 |未定义

插件的可选名称。如果设置，插件将可用 通过它的名字和它的构造函数获取。如果没有，那么只有通过它 构造函数。

名称应该反映构造函数的名称。

为了保持插件类定义紧凑，建议定义 此属性作为静态 getter：

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

注意：本机 Function.name 属性不能用于保留插件名称，因为它会在代码中被破坏 缩小。

将此函数插入​​到我的插件代码中不起作用，所以我有点迷失了问题可能是什么。我在下面包含了我的代码。我已经按照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'
};

图片库.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 指出 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

从'./js/image-library.js'导入ImageLibrary；

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