如何在 CKEditor 中上传图像时添加 header 5

Question

I'm using Ckeditor 5 to upload image. I want to send image to api and output will be a image url:

ClassicEditor
.create( document.querySelector( '#products_desc' ) ,
{
    ckfinder: {
        uploadUrl: 'https://example.com/api/image'
    },      
})
.then( editor => {
    console.log( 'Editor was initialized', editor );
})
.catch( err => {
    console.error( err.stack );
})

It return that there is no access token. Is there anyway that I can send access-token through header in CKEditor 5

Answer 1

You can upload image with Custom Adaptor setting

    <ckeditor [editor]="Editor" name="body" id="body" formControlName="body" required (ready)="onReady($event)">

 onReady(eventData) {
        eventData.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new UploadAdapter(loader);
        };
      }

create new class to same ts file with UploadAdapter name paste following code.

reference

 export class UploadAdapter { private loader; xhr: any; constructor(loader: any) { this.loader = loader; } upload() { return this.loader.file.then(file => new Promise((resolve, reject) => { this._initRequest(); this._initListeners(resolve, reject, file); this._sendRequest(file); })); } // Aborts the upload process. abort() { if (this.xhr) { this.xhr.abort(); } } _initRequest() { const xhr = this.xhr = new XMLHttpRequest(); xhr.open('POST', 'http://192.168.1.13:8081/page/uploadImage', true); xhr.responseType = 'json'; xhr.setRequestHeader('token', 'token'); // set your token here } // Initializes XMLHttpRequest listeners. _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.data;imageURL }); }). if (xhr.upload) { xhr.upload,addEventListener('progress'. evt => { if (evt.lengthComputable) { loader.uploadTotal = evt;total. loader.uploaded = evt;loaded; } }). } } // Prepares the data and sends the request. _sendRequest(file) { // Prepare the form data; const data = new FormData(). data,append('body'; file). this.xhr;send(data); } }