How to use ImageResize with react. I can't find any sample. I want to resize image which I add from CKEditor on my react ponent.

<CKEditor editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={editor => {
        editor.plugins.get(
          "FileRepository"
        ).createUploadAdapter = loader => {
          return new UploadAdapter(loader)
        }

        //editor.plugins.add("ImageResize") or something?

        console.log("Editor is ready to use!", editor)
      }}
      onChange={(event, editor) => {
        const data = editor.getData()
        console.log({ event, editor, data })
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor)
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor)
      }}
/>

How to use ImageResize with react. I can't find any sample. I want to resize image which I add from CKEditor on my react ponent.

<CKEditor editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={editor => {
        editor.plugins.get(
          "FileRepository"
        ).createUploadAdapter = loader => {
          return new UploadAdapter(loader)
        }

        //editor.plugins.add("ImageResize") or something?

        console.log("Editor is ready to use!", editor)
      }}
      onChange={(event, editor) => {
        const data = editor.getData()
        console.log({ event, editor, data })
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor)
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor)
      }}
/>

• javascript
• reactjs
• ckeditor
• ckeditor5
• ckeditor5-react

3 Answers 3

I think the one and correct way to do this is you should fork the ClassicEditor and build your own ClassicEditor.

You can follow this to create your own build https://ckeditor./docs/ckeditor5/latest/builds/guides/development/custom-builds.html

After you done with custom your own build, you need to install it from your repository url.

I'm already had a simple custom build that include ImageResize and Base64Uploader in case you want an example: https://github./hmtri1011/ckeditor5-build-classic/blob/stable/src/ckeditor.js

editor.plugins has a method init( plugins, [ removePlugins ] ) → Promise.<LoadedPlugins> that initializes a set of plugins and adds them to the collection.

https://ckeditor./docs/ckeditor5/latest/api/module_core_plugincollection-PluginCollection.html

Based on the information on the docs page of react:

While you can change the configuration easily by using the config property of the <CKEditor> ponent which allows you to change the toolbar or remove some plugins, in order to add plugins you need to rebuild the editor.

There is full explanation on how to do this in the above link.

Once you have it, you can import ImageResize from the @ckeditor/ckeditor5-image/src/imageresize:

import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";

And use it inside your CKEditor's config:

<CKEditor
    config={{ plugins: [ImageResize] }}
    ....
/>