CKEditor 5 注册多个上传适配器

Posted 2023-02-22

【中文标题】CKEditor 5 注册多个上传适配器

【英文标题】：CKEditor 5 Register More Than One Upload Adapter

【发布时间】：2019-04-09 15:24:02

【问题描述】：

我使用 CKEditor 5 为我们的软件实现编辑器。我想用这个编辑器上传图片和视频。它有图像插件。我定制了 ckfinder 上传适配器来上传图片到我们的服务器。它工作完美。我成功上传了图片并在编辑器中展示了它们。然后我想将视频文件上传到我们的服务器。所以我为ckeditor创建了一个视频插件来上传、显示视频。我还创建了另一个上传适配器来将视频上传到我们的服务器。此时，ckeditor filerepository 插件只接受一个适配器。导入了两个适配器，但 filerepository 使用了最后一个导入的适配器。我想使用图片上传适配器上传图片和视频上传适配器上传视频。但我无法弄清楚。

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

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

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

【参考方案1】：

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

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

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

【讨论】：

我运行我在初始化图像上传适配器时提到的代码行。视频上传适配器的 init 方法也包含此代码行。但是在那里， new UploadAdapter( ... ) 创建了一个与图像上传适配器不同的类实例。我的意思是，当我将两个适配器插件导入 ckeditor 时，每个适配器插件都会创建自己的适配器实例。但是 Filerepository 使用最后创建的适配器实例。我上传了一个图像文件，视频上传适配器尝试上传图像文件。我不想要这个。

我可以用一个适配器解决这个问题，这个适配器需要决定如何按文件类型上传文件。但我想分开适配器。每个适配器都应该做自己的工作。

我不明白你的意思。您在问题中提到的代码是错误的。如果您想为不同的文件使用不同的上传适配器，则需要在createUploadAdapter() 中处理。

我编辑了这个问题。请查看代码 sn-ps。当 CKEditor 初始化插件时，这些 init() 方法正在运行。当我上传文件时，最后一个初始化插件的 upload() 方法正在运行。不是它自己的 upload() 方法。感谢您的帮助。

您只需分配一个回调。和我的回答一模一样。你不能修改editor.plugins.get( FileRepository ).createUploadAdapter 两次！这样，只会执行后面的回调。你需要一个插件，它知道这两个适配器并且只分配一个回调。和我的回答一模一样。