javascript - CKEditor5 : Cannot read property 'pluginName' of undefined

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

图像库.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。我很容易错过的一点是，每当您导入某些内容时，您还必须导出它，否则它将不可用。关键字 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';

您没有从文件中导出该库，因此会出现错误无法读取未定义的属性“pluginName”。 ckeditor.js 中的 ImageLibrary 变为 undefined，因为在 image-library 中找不到它文件。