CKEditor React Image Resize Plugin

Question

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 component.

<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)
      }}
/>

Sequester

Answer 1

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.com/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.com/hmtri1011/ckeditor5-build-classic/blob/stable/src/ckeditor.js

Homager

Answer 2

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

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

Schizoid

This answer is not relevant to the react component – Prosperous

Answer 3

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> component 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] }}
    ....
/>

Prosperous

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: ckeditor.com/docs/ckeditor5/latest/framework/guides/support/… – Sequester

@BurakKalafat I'm not sure why is this comment related to my answer. Can you please explain? – Prosperous

I am getting this error after adding this import and config. It says duplicated modules. – Sequester

You will need to re-build the editor. Did you do that? Note that you can't just use the @ckeditor/ckeditor5-build-classic. – Prosperous

dont mix build package with other otherwise you will get ckeditor-duplicated-modules error – Bowel