Как добавить заголовок при загрузке изображения в CKEditor 5 - PullRequest
Новая
       9

Как добавить заголовок при загрузке изображения в CKEditor 5

1 голос
/ 27 апреля 2020

Я использую Ckeditor 5 для загрузки изображения. Я хочу отправить изображение в API, и на выходе будет 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 );
})

Возвращает, что токена доступа нет. Есть ли в любом случае, что я могу отправить токен доступа через заголовок в CKEditor 5

1 Ответ

1 голос
/ 27 апреля 2020

Вы можете загрузить изображение с настройкой пользовательского адаптера 

    <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);
        };
      }

создать новый класс в тот же файл TS с UploadAdapter имя вставить следующий код.

ссылка 

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);
  }

}
...