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.

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

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

回答2:

Try passing the config in an input.

回答3:

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

Here are the complete list: 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}

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}

回答4:

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'],
}

回答5:

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));

来源：https://stackoverflow.com/questions/60128705/ckeditor-5-remove-insert-media-option-from-classiceditor

标签

html

ckeditor

angular7

ckeditor5