CKEditor5: Cannot read property 'pluginName' of undefined












0















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.
}









share|improve this question





























    0















    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.
    }









    share|improve this question



























      0












      0








      0








      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.
      }









      share|improve this question
















      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.
      }






      javascript ckeditor






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 30 '18 at 20:41







      Jeroen

















      asked Nov 25 '18 at 20:47









      JeroenJeroen

      8811




      8811
























          1 Answer
          1






          active

          oldest

          votes


















          1















          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.






          share|improve this answer



















          • 1





            Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

            – Jeroen
            Nov 30 '18 at 20:33











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53471799%2fckeditor5-cannot-read-property-pluginname-of-undefined%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1















          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.






          share|improve this answer



















          • 1





            Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

            – Jeroen
            Nov 30 '18 at 20:33
















          1















          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.






          share|improve this answer



















          • 1





            Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

            – Jeroen
            Nov 30 '18 at 20:33














          1












          1








          1








          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.






          share|improve this answer














          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 29 '18 at 10:58









          Maciej BukowskiMaciej Bukowski

          1,4981321




          1,4981321








          • 1





            Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

            – Jeroen
            Nov 30 '18 at 20:33














          • 1





            Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

            – Jeroen
            Nov 30 '18 at 20:33








          1




          1





          Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

          – Jeroen
          Nov 30 '18 at 20:33





          Thanks. I added the keywords 'export default' in front of class ImageLibrary, which made it work. I guess it's a classic beginners' mistake. Apologies! Will update my question with the solution based on your answer!

          – Jeroen
          Nov 30 '18 at 20:33




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53471799%2fckeditor5-cannot-read-property-pluginname-of-undefined%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Costa Masnaga

          Fotorealismo

          Sidney Franklin