how to remove the image plugin on ckeditor5 toolbar on react?

import React, { Component, Fragment } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const Editor = ({onEditorStateChange, defaultValue}) => {
    const onChange = (event, editor ) => {
      const data = editor.getData();
      console.log(  data  );
      onEditorStateChange(data)
    };

    const onBlur = (event, editor) => {
      console.log( 'Blur.', editor );
    };

    const onFocus = (event, editor) => {
      console.log( 'Focus.', editor );
    };

    const onInit = (editor) => {
      // editor
      // You can store the "editor" and use when it is needed.
      console.log( 'Editor is ready to use!', editor );
    };

    return (
        <div className="editor">
            {/* <h2>Using CKEditor 5 build in React</h2> */}
            <CKEditor
                editor={ClassicEditor}
                data={defaultValue}
                onInit={onInit}
                onChange={onChange}
                onBlur={onBlur}
                onFocus={onFocus}
            />
        </div>
    );
}

export default Editor;

how to remove the image plugin on ckeditor5 toolbar on react?

import React, { Component, Fragment } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const Editor = ({onEditorStateChange, defaultValue}) => {
    const onChange = (event, editor ) => {
      const data = editor.getData();
      console.log(  data  );
      onEditorStateChange(data)
    };

    const onBlur = (event, editor) => {
      console.log( 'Blur.', editor );
    };

    const onFocus = (event, editor) => {
      console.log( 'Focus.', editor );
    };

    const onInit = (editor) => {
      // editor
      // You can store the "editor" and use when it is needed.
      console.log( 'Editor is ready to use!', editor );
    };

    return (
        <div className="editor">
            {/* <h2>Using CKEditor 5 build in React</h2> */}
            <CKEditor
                editor={ClassicEditor}
                data={defaultValue}
                onInit={onInit}
                onChange={onChange}
                onBlur={onBlur}
                onFocus={onFocus}
            />
        </div>
    );
}

export default Editor;

• javascript
• reactjs
• ckeditor

3 Answers 3

You can provide a config property to the CKEditor ponent and pass in an array of strings to the removePlugins prop.

  <CKEditor
          editor={ClassicEditor}
          config={{
            removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
          }}
          data={defaultValue}
          onChange={onChange}
        >
        </CKEditor>

Here is more information on the CKEditor React ponent: https://ckeditor./docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#ponent-properties

Here is a link to the configuration options https://ckeditor./docs/ckeditor5/latest/builds/guides/integration/configuration.html

Here is a list of the default plugins with the ClassicEditor:

• Essentials
• CKFinderUploadAdapter
• Autoformat
• Bold
• Italic
• BlockQuote
• CKFinder
• EasyImage
• Heading
• Image
• ImageCaption
• ImageStyle
• ImageToolbar
• ImageUpload
• Indent
• Link
• List
• MediaEmbed
• Paragraph
• PasteFromOffice
• Table
• TableToolbar
• TextTransformation

My React solution

In my React ponent below only worked to remove Image and Media icons

<CKEditor
    editor={ClassicEditor}
    config={{
        removePlugins: ["EasyImage","ImageUpload","MediaEmbed"]
    }}
    data={form.description}
    onChange={(event, editor) => {
        const data = editor.getData();
        setForm((prev) => ({ ...prev, description: data }))
        // console.log({ event, editor, data });
    }}
/>

you can remove the image plugin with this config :

{
  removePlugins: ['ImageInsert', 'ImageUpload'],
}