Search code examples
htmlckeditorangular7ckeditor5

CKEDITOR 5 - Remove "Insert Media" option from ClassicEditor


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.

enter image description here

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


Solution

  • 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

    enter image description here

    Hopes this will help someone!