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

Question

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

3

我正在使用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 中通过标头发送访问令牌？

- Jon

似乎没有支持它的功能：https://github.com/ckeditor/ckeditor5/issues/887 - Poul Kruijt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neha Shah · Accepted Answer

你可以通过自定义适配器设置上传图片。

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

}