Tukukkk

I am trying to make a custom image plugin for CKEditor which integrates with my custom-made image upload system. Mainly, I run into problems while setting up this plugin. When I load "out-of-the-box" plugins, everything works fine (also, when I remove my own plugin, everything works again as it used to).

I get the following console error:

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

I couldn't find anything about the property pluginName, apart from the following excerpt of 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.

Inserting this function into my plugin code did not work, so I am kind of lost here what the problem could be. I've included my code below. I've set it up according to the CKEditor advanced setup, first option, made in Webpack.

Am I missing something, or is there a problem in my code?

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'

};

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

    }

}

Update: solution based on Maciej Bukowski's answer

Maciej pointed out that the class ImageLibrary (which I tried to import) lacked the export. Something that I've easily missed, was that whenever you're importing something, you're going to have to also export it, otherwise it won't be available. The keywords export default did the trick for me.

The culprit was in image-library.js, for which I change the following line:

class ImageLibrary extends Plugin {

    // ... this failed, as it missed the `export default` keywords

}

Into the following:

export default class ImageLibrary extends Plugin {

    // ... works, as I properly export what I want to import.

}

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

You don't export that library from a file, so that's why you have an error Cannot read property 'pluginName' of undefined. The ImageLibrary in the ckeditor.js becomes the undefined as it's can't be found in the image-library file.