CKEDITOR 5 - Remove "Insert Media" option from ClassicEditor - html

Question

I'm using CKEditor 5 in my angular 7 application. ClassicEditor by default shows the Insert Media button on the toolbar as highlighted in the below image.
On researching online I found we can disable particular options by using the removePlugins option in the editorConfig like below.
editor.component.ts
editorConfig = {
removePlugins: ['Image'],
placeholder: 'Type the content here!'
};
Above code is to not remove the Insert Media option but a different option to Insert Image. But it doesn't work. Even after using the above code I could still see Image insert option in my CK Editor.
I also couldn't find online what I need to provide in the removePlugins for disabling the Insert Media option to try if atleast that works. Any help will be appreciated.
Thanks in advance

Answer 1

Instead of removing specific buttons it is possible to set the default configuration of the CKEditor to show only the options which are required to us.
Adding below code to the constructor in your angular component.ts file will create a simple CKEditor with only those options mentioned in the items array. mediaEmbed is the name of the item responsible for displaying Insert Video option in the CKEditor which I've not mentioned in the items array to not display it in the CKEditor.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'|',
'bulletedList',
'numberedList',
'|',
'insertTable',
'|',
'imageUpload',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
language: 'en'
};
Result after adding above code
Hopes this will help someone!

Answer 2

This definitely work
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch( error => {
console.error( error );
} );
</script>

Answer 3

Try passing the config in an input.

Answer 4

It's very unintuitive, I know.
ClassicEditor
.create(document.querySelector(selector), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch(error => {
console.error(error);
});
You can get a list of all plugins available like this:
console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));

Answer 5

The first way to solve this problem
Go to node modules -> #ckeditor -> ckeditor-build-classic -> build ->ckeditor.js
Go or search for defaultConfig in ckeditor.js --- you will find out in the last few lines
Here remove the unwanted fields like table, media, etc
The second way to solve the problem
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}
Here are the complete list:
Eg - remove the table from the Editor
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}
put in the constructor of the component.ts file
ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

Answer 6

I think you're on the right track. I was able to accomplish this by using the removePlugins config option. The key was making sure that the items in your removePlugins array match the item names in the default toolbar config.
const defaultToolbarItems = [
...,
'imageUpload',
'mediaEmbed',
...
];
const editorConfig = {
placeholder: 'Type the content here!',
removePlugins: ['imageUpload','mediaEmbed'],
}