无法在 ckeditor 中上传图像

Question

I am using CKEDITOR5 and would like to be able to allow users to upload images. I am using customized upload adaptor described on the official website but I can't use XMLHttpRequest to upload images. Everytime I upload image it gives the following error: Access to XMLHttpRequest at 'https://xxxxxx' from origin 'http://xx.xx.xx.xx:xxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. I pass the image to backend and upload it to s3 successfully, backend returns a correct s3 url, and I use it as the url of xhr.open('POST', url, true) . Here is the code of my customized adaptor:

import axios from 'axios'
import { postAccessHeader, clearLocalStorage } from '../../common/publicFunc';

class MyUploadAdapter {
    constructor( loader ) {
        this.loader = loader;
        this.url = '';
    }

    upload() {
      return this.loader.file
        .then( file => new Promise( ( resolve, reject ) => {
          this._s3_upload_image( resolve, reject, file );
      } ) );
    }
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    _initRequest( url ) {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open( 'POST', url, true );
        xhr.responseType = 'json';
    }

    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${ file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;

            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }
            resolve( {
                default: response.url
            } );
        } );

        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }
    _sendRequest( file ) {
        const data = new FormData();

        data.append( 'upload', file );
        this.xhr.send( data );
    }

    _s3_upload_image( resolve, reject, file ){
        console.log(file)
        const formData = new FormData();
        formData.append( 'upload', file);
        let payload = {"image": formData, "file": file, "test": "hi"}
        console.log(payload)
        let settings = postAccessHeader('/account/s3_upload_image', formData);
        axios(settings)
        .then(response => {
          const code = response.status;
          console.log(response)
          if (code == 200) {
            if (response.data.status) { 
              let url = response.data.url
              this._initRequest( url );
              this._initListeners( resolve, reject, file );
              this._sendRequest( file );
            } else {
              if (response.data.AuthFailed) {
                clearLocalStorage();
              }
              else {
              }
            }
          } else {
            alert("unable to upload image");
          }
        })
        .catch(error => {
          alert(error);
        });
      }
}

export default MyUploadAdapter

Thanks for any help!

Answer 1

I have been through this a week ago. I suggest using CKEditor4 This working on my web. It will auto-embed video and images from URL

Use npm i ckeditor4-react to install ckeditor4-react

import CKEditor from "ckeditor4-react";
import React from "react";
    
export default function editor() {
  
const [value,setValue]=useState('')

  return (
    <div>
       <CKEditor
        data={value}
        config={{
          embed_provider:
            "//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}",
          extraPlugins: ["embed", "autoembed"],
          mediaEmbed: { previewsInData: true, autoEmbed: true },
        }}
        onChange={(e) => {
          let  data = e.editor.getData();
          setValue(data);
        }}
      />
    </div>
  )
}