ckeditor无法上传图片

Question

我正在使用 CKEDITOR5，并希望能够允许用户上传图像。我正在使用官方网站上描述的自定义上传适配器，但我不能使用 XMLHttpRequest 上传图像。每次我上传图片时都会出现以下错误： CORS 策略已阻止从源“http://xx.xx.xx.xx:xxxx”访问“https://xxxxxx”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。我将图像传递到后端并成功上传到 s3，后端返回正确的 s3 url，并且我用它作为 xhr.open('POST', url, true) 的 url。这是我的自定义适配器的代码：

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

感谢您的帮助！

Answer 1

我一周前经历过这个。我建议使用 CKEditor4 这在我的网络上工作。它将自动嵌入来自 URL 的视频和图像

使用npm i ckeditor4-react安装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>
  )
}