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
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!