Question

我使用CKEditor 5来实现我们软件的编辑器。我想使用此编辑器上传图像和视频。它具有图像插件。我定制了ckfinder上传适配器，以将图像上传到我们的服务器。完美的作品。我上传了图片，并在编辑器中成功显示了它们。然后，我想将视频文件上传到我们的服务器。因此，我为ckeditor创建了一个视频插件，用于上传，显示视频。我还创建了另一个上传适配器，将视频上传到我们的服务器。在这一点上，ckeditor文件存储库插件仅接受一个适配器。导入了两个适配器，但文件存储库使用了最后导入的适配器。我想使用图像上传适配器上传图像，并使用视频上传适配器上传视频。但我不知道。

图像上传适配器使用以下代码初始化：

init() {
    const url = this.editor.config.get( 'imgUpload.url' );

    if ( !url ) {
        return;
    }

    this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new ImgUploadAdapter( loader, url, this.editor.t );
}

视频上传适配器使用以下代码初始化：

init() {
    const url = this.editor.config.get( 'videoUpload.url' );

    if ( !url ) {
        return;
    }

    this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new VideoUploadAdapter( loader, url, this.editor.t );
}

如何告诉文件存储库分别对图像使用图像上传适配器和对视频使用视频上传适配器？这可能吗？

Answer 1

在loader参数中，您获得FileLoader的实例，该实例在File属性中公开了本机FileLoader#file对象。这意味着在此阶段，您可以通过以下方式访问文件名：

this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => {
    const fileName = loader.file.name;

    if ( fileName.endsWith( '.mov' ) ) {
        return new FileUploadAdapter( ... );
    } else {
        return new GenericUploadAdapter( ... );
    }
};

CKEditor 5注册多个上传适配器

1 个答案: