I am facing a challenge in creating a custom image plugin for CKEditor that can seamlessly integrate with my own image upload system. While trying to set up this plugin, I encountered some difficulties. Oddly enough, the "out-of-the-box" plugins work perfectly fine (and everything functions normally when I remove my custom plugin).
The console displays the following 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
Despite my efforts, I could not find any information on the pluginName property, except for a snippet of documentation from CKEditor located at this link:
pluginName: String | undefinedAn optional name assigned to the plugin. When defined, it enables access to the plugin by its name and constructor. If not defined, access is only possible through the constructor.
The name should reflect the constructor's name.
To maintain a concise plugin class definition, 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 cannot be used due to potential mangling during code minification.
When I attempted to incorporate this function into my plugin code, it did not yield the desired results. This has left me perplexed about where the issue may lie. Below, you will find my code setup as per the CKEditor advanced setup using Webpack.
Could someone please point out if there is a missing element or an issue within 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
.create( document.querySelector( '#editor' ))
.then( editor => {
editor.commands.get( 'imageStyle' ).on( 'execute', ( evt, args ) => {
// ...
} );
} )
.catch( error => {
console.error( error.stack );
} );
ckeditor.js
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
// Plugin imports...
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [
// List of plugins...
];
ClassicEditor.defaultConfig = {
// Configuration options...
};
image-library.js
// Plugin imports...
export default class ImageLibrary extends Plugin {
// Plugin functionality...
}
Update: Resolving based on Maciej Bukowski's suggestion
Following Maciej's advice, I made modifications to the ImageLibrary class by adding the necessary export default keywords. It was important to remember that whenever something is imported, it also needs to be exported to remain accessible. By including export default, the import functionality worked seamlessly.
The key issue resided in the file image-library.js, where I updated the line:
class ImageLibrary extends Plugin {
// ...
}
To:
export default class ImageLibrary extends Plugin {
// ...
}