ckeditor无法上传图片

Posted 2023-03-03

【中文标题】ckeditor无法上传图片

【英文标题】：Can't upload image in ckeditor

【发布时间】：2020-11-27 09:28:46

【问题描述】：

我正在使用 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

感谢您的帮助！

【参考方案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>
  )