Upload images in CKEditor in React

19 Views Asked by At

I have a problem, I decided to use the CKEditor article editor. It works well. But I can't finish uploading images in this editor. I've already spent a week on this. But so far I have not been able to come to a result. I use React, I have a server on Express.

My code now looks like this:

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
          <CKEditor
            value={description}
            data={description}
            editor={ClassicEditor}
            onChange={(event, editor) => {
              const data = editor.getData();
              setDescription(data);
            }}
            config={{
              ckfinder: {
                uploadUrl:
                  "http://localhost:3131/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json",
              },
            }}
          />

I used this instruction to set up a simple CKFinder upload adapter:

https://ckeditor.com/docs/ckeditor5/latest/features/file-management/ckfinder.html#configuring-the-image-upload-only

I have fronted localhost:5173 and server localhost:3131

I have installed a PHP server connector on my localhost:3131

D:\code\react\imz-server\ckfinder\ckeditor

I seem to have done everything correctly according to the instructions. But when I select an image, I get the following error in console:

my error

uploadadapter.ts:184 
        
        
        POST http://localhost:3131/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json 404 (Not Found)

and also in network:

Cannot POST /ckfinder/core/connector/php/connector.php

Although this folder and the PHP Connector file itself exist

my folder with connector

D:\code\react\imz-server\ckfinder\core\connector\php\connector.php

What am I doing wrong? Help please

0

There are 0 best solutions below