CKEditor5: Cannot read property 'pluginName' of undefined
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 import
ing 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
add a comment |
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 import
ing 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
add a comment |
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 import
ing 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
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 import
ing 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
javascript ckeditor
edited Nov 30 '18 at 20:41
Jeroen
asked Nov 25 '18 at 20:47
JeroenJeroen
8811
8811
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
1
Thanks. I added the keywords 'export default' in front ofclass 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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
1
Thanks. I added the keywords 'export default' in front ofclass 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
add a comment |
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.
1
Thanks. I added the keywords 'export default' in front ofclass 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
add a comment |
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.
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.
answered Nov 29 '18 at 10:58
Maciej BukowskiMaciej Bukowski
1,4981321
1,4981321
1
Thanks. I added the keywords 'export default' in front ofclass 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
add a comment |
1
Thanks. I added the keywords 'export default' in front ofclass 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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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