How to paste image into CKEditor5 in React using Base64UploadAdapter

Question

As per React & CKEditor5 Image upload options:

https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

The following code does render the CKEditor component correctly:

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/base64uploadadapter';

...

<CKEditor
    editor={ ClassicEditor }
    data=  { value }        
    onInit={ editor => {
        console.log( { event, editor, editor.getData()} );
    } }
    onChange={ ( event, editor ) => {
        const data = editor.getData();
        onChange(data);
    } }
    onBlur={ editor => {
        console.log( 'Blur.', editor );
    } }
    onFocus={ editor => {
        console.log( 'Focus.', editor );
    } }
/>

My understanding was that @ckeditor/ckeditor5-build-classic implements the upload adapter and should allow pasting of images into the editor as per the demo page: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html

But after adding config={ { plugins: [ Base64UploadAdapter] } } to CKEditor, the data neither loads nor can images be pasted.

What is the proper way to use ckeditor5-react and the base64uploader? I have also tried importing

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

instead of the ckeditor-build-classic, but the componenent does not render at all, then.

Otes

You can refer to #46765697 and #54564816 – Endowment

Did you check the console for errors? You should get this error: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: ckeditor.com/docs/ckeditor5/latest/framework/guides/support/… – Ephrem

@Otes Did u find the way to make it work?? – Sticky

check the below link and see if you are able to upload images. codesandbox.io/s/github/diasraphael/ckeditor-sample – Oculist

Answer 1

I have the same problem. Try it:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';

const uploadAdapter = (loader) => {
  return {
    upload: async () => {
      const file = await loader.file;
      const base64 = await getBase64(file);
      return {
        default: base64,
      };
    },
  };
};

// Save with API:
// const API_URL = "";
// const UPLOAD_ENDPOINT = "";
// const uploadAdapter = (loader) => {
//   return {
//     upload: () => {
//       return new Promise((resolve, reject) => {
//         const body = new FormData();
//         loader.file.then((file) => {
//           body.append("file", file);
//           axios
//             .post(`${API_URL}/${UPLOAD_ENDPOINT}`, body)
//             .then((res) => {
//               resolve({ default: `${API_URL}/${res.data.url}` });
//             })
//             .catch((err) => {
//               reject(err);
//             });
//         });
//       });
//     },
//   };
// };

function uploadPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return uploadAdapter(loader);
  };
}

<CKEditor
  editor={ClassicEditor}
  config={{
    extraPlugins: [uploadPlugin],
  }}
  data='<p>Hello from CKEditor 5!</p>'
  onReady={(editor) => {
    editor.editing.view.change((writer) => {
      writer.setStyle(
        'height',
        '200px',
        editor.editing.view.document.getRoot()
      );
    });
  }}
  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);
  }}
/>;

Microbe

Answer 2

You should build the editor from source and load the plugin using the plugins configuration. You can check out the guide for create-react-app 2 that shows what needs to be installed and how the webpack should be configured.

The way you did won't work because of two things:

1. Building source code and built code together is forbidden and throws the Some CKEditor 5 modules are duplicated. error. You can only add a plugin that doesn't have any imports to the CKEditor 5 code.
2. Using the plugins configuration overrides the default set of plugins. The extraPlugins option would work if it wouldn't have any imports to CKEditor 5 codebase.

Wartime

Does it require ejecting from the CRA – Sticky

No, it requires creating the custom build of CKEditor 5 editor. – Wartime

But of course, you can also eject from the CRA and work on the CKEditor 5 source code without creating any intermediate build. – Wartime

Все равно нихуя не работает – Cary

Answer 3

the below package is pre-built with default plugins.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

In order to add or remove plugins depending on your need, you can create a custom build. Try it here.

Acculturate