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

Question

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

return 没有访问令牌。无论如何，我可以在 CKEditor 5

中通过 header 发送 access-token

Answer 1

您可以使用自定义适配器设置上传图片

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

创建新的 class 到相同的 ts 文件 UploadAdapter 名称粘贴以下代码。

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

}

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

How to add header while uploading image in CKEditor 5

javascript

angular

typescript

ckeditor5