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

score 4 · Answer 1 · answered May 22 '20 at 05:45

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

score 0 · Answer 2 · answered May 16 '20 at 13:59

0

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

answered May 16 '20 at 13:59

acbay

832
7
7

This answer is not relevant to the react component – Dekel May 16 '20 at 23:22

score 0 · Answer 3 · answered May 16 '20 at 23:31

0

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

answered May 16 '20 at 23:31

Dekel

60,707
10
101
129

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules – Burak Kalafat May 17 '20 at 14:13
@BurakKalafat I'm not sure why is this comment related to my answer. Can you please explain? – Dekel May 17 '20 at 14:34
I am getting this error after adding this import and config. It says duplicated modules. – Burak Kalafat May 17 '20 at 18:41
You will need to re-build the editor. Did you do that? Note that you can't just use the `@ckeditor/ckeditor5-build-classic`. – Dekel May 17 '20 at 21:10
dont mix build package with other otherwise you will get ckeditor-duplicated-modules error – Muhammad Numan May 20 '20 at 05:43

CKEditor React Image Resize Plugin

3 Answers3