使用 CKEditor，如何替换图像上传适配器错误“警报”并使用自定义处理程序来通知用户

Question

根据CK Editor，自定义上传适配器的实现仅支持两种生命周期方法：

upload

和

abort

。似乎没有任何方法可以拦截编辑器来自定义句柄，警告用户上传错误。 CK Editor 显示一条

alert()

消息，该消息与应用程序不太匹配。我想用我自己的应用内模型替换该警报，但仍然让 CK 编辑器管理其余过程，例如删除图像。

这是警报的示例。单击“确定”即可删除图像，这很好。我只是想绑上钩子来显示我自己的自定义模型：

export class CKImageUploadAdapter implements UploadAdapter {

  constructor(private fileLoader: FileLoader, private uploader: FileUploader) {

  }

  upload(): Promise<Record<string, string>> {
      return this.fileLoader.file.then( file => this.uploader.upload( file ) );
  }

  abort() {
      this.uploader.abort();
  }
}

export class FileUploader {

  async upload(file: File): Promise<{}> {

        return this.uploader.upload()
                            .then(r => JSON.parse(<string>r.data))
                            .then((json) => {
                                if (json.error) {
                                  //  Notifiy editor of an error to
                                  //  handle image removal, but how 
                                  //  to hook into it or suppress 
                                  //  "alert()" window?
                                  throw new Error(json.error);  
                                }
                                //  I can pseudo "hook" here, which
                                //  also handles succuss result json
                                this.listener({ result: json });  
                                return json;
                            });
    });
    
 }

  abort() {
    this.uploader && this.uploader.abort();
  }

}

失败时的 JSON 结果：

{
  "statusCode":413,
  "error":"Request Entity Too Large",
  "message":"Payload content length greater than maximum allowed: 5242880"
}

成功时的 JSON 结果：

{
   "default":"http://localhost:5000/content/61ef62de56e079fae13bb208",
   "720":"http://localhost:5000/content/61ef62de56e079fae13bb208/md",
   "380":"http://localhost:5000/content/61ef62de56e079fae13bb208/sm",
   "160":"http://localhost:5000/content/61ef62de56e079fae13bb208/xs"
}

Answer 1

就我而言，我覆盖了警报功能。 例如，我使用 sweetalert2 作为我的提醒。

window.alert = function(message) {
  Swal.fire('Alert', message, 'warning');
};

请注意，这将在您的应用程序中全局修改alert()函数。 有关警报功能的更多信息，您可以查看此链接。

Answer 2

您可以在CK Editor的

show:warning

插件上使用

notification

事件的监听器。

HTML：

<ckeditor [editor]="editor"
                [config]="config"
                (ready)="onReady($event)"></ckeditor>

TS：

  onReady(editor: any): void {
    editor.plugins.get('Notification').on('show:warning', (event: any, data: any) => {
      // your code for showing error

      event.stop();
    });
  }