Не могу загрузить изображение в ckeditor - PullRequest
Новая
       97

Не могу загрузить изображение в ckeditor

0 голосов
/ 07 августа 2020

Я использую CKEDITOR5 и хочу, чтобы пользователи могли загружать изображения. Я использую настраиваемый адаптер загрузки, описанный на официальном сайте, но я не могу использовать XMLHttpRequest для загрузки изображений. Каждый раз, когда я загружаю изображение, появляется следующая ошибка: Доступ к XMLHttpRequest в 'https://xxxxxx' из источника 'http://xx.xx.xx.xx: xxxx' заблокирован политикой CORS: ответ на предварительный запрос не передает доступ контрольная проверка: в запрошенном ресурсе нет заголовка Access-Control-Allow-Origin. Я передаю изображение в бэкэнд и успешно загружаю его в s3, бэкэнд возвращает правильный URL-адрес s3, и я использую это как URL-адрес xhr.open ('POST', url, true) . Вот код моего индивидуального адаптера: 

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

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 07 августа 2020

Я прошел через это неделю go. Я предлагаю использовать 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>
  )
}
...