React js: Image upload is not working in CKEditor

user_11801762 0
Viewed 2739

CKEditor image upload is not working and below is the code

<CKEditor
                    editor={ ClassicEditor }
                    data={this.state.miscNotesData.miscnote}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        this.handleChange(data);
                        console.log( { event, editor, data } );
                    } }

                />

Error:

  backend.js:6 filerepository-no-upload-adapter: Upload adapter is not defined. 
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

enter image description here

reactjs node.js ckeditor javascript
1 Answers

As provided in documentation https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html there are 4 options to upload images in CKEDitor: Easy Image(proprietary), CKFinder(needs connector on PHP or ASP.net), Simple adapter, Base64 adapter

I use Simple adapter for this purpose with Node js server:

First, I installed SimpleUploadAdapter in ClassicEditor, then I set up config in CKEditor:

   <CKEditor
        data={input.value}
        editor={ ClassicEditor }
        config={{
          simpleUpload: {
            uploadUrl: 'https://myserver.herokuapp.com/image-upload'
          },
          toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
            'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
        }}
      />

And create url on my server /image-upload

user_28802060
Related