How to do CKEditor 5 Image Uploading?

Question

ClassicEditor
    .create( editorElement, {
        ckfinder: {
            uploadUrl: \'my_server_url\'
        }
    } )
    .then( ... )
    .catch( ... );
         


        

Answer 1

class UploadAdapter {
  constructor( loader ) {
    this.loader = loader;
    this.upload = this.upload.bind(this)
    this.abort = this.abort.bind(this)
  }

  upload() {
    const data = new FormData();
    data.append('typeOption', 'upload_image');
    data.append('file', this.loader.file);

    return axios({
        url: `${API}forums`,
        method: 'post',
        data,
        headers: {
          'Authorization': tokenCopyPaste()
        },
        withCredentials: true
      }).then(res => {
        console.log(res)
        var resData = res.data;
        resData.default = resData.url;
        return resData;
      }).catch(error => {
        console.log(error)
        return Promise.reject(error)
      });
  }

  abort() {
    // Reject promise returned from upload() method.
  }
}               
 {
    editor.ui.view.editable.element.style.height = '200px';
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
      return new UploadAdapter( loader );
    };
  } }
  onChange={ ( event, editor ) => {
    console.log(editor.getData())
  } }
/>