Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CKEditor React Image Resize Plugin

Tags:

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)
      }}
/>
like image 759
Burak Kalafat Avatar asked May 13 '20 13:05

Burak Kalafat


1 Answers

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

like image 197
M.Tae Avatar answered Oct 02 '22 15:10

M.Tae