为什么 CKEditor 5 中的 Base64 Upload Adapter 无法正确转换图像？

编程问答 2022-05-03

问题描述

在我的 Angular 11 应用程序中，我有一个 ckEditor 组件。我希望它允许从需要上传适配器的用户文件系统（而不仅仅是通过链接）上传图像。我通过 https://ckeditor.com/ckeditor-5/online-builder/ 自定义了我的 ckEditor 构建，并包含了 Image、ImageInsert、ImageUpload 和 Base64UploadAdapter（以及许多其他内容）。

我尝试包含 SimpleUploadAdapter 插件，但它似乎无法在我的系统上被识别，给我一个 error-filerepository-no-upload-adapter 错误，就像我没有包含该插件一样。
因此，我包含了 'Base64UploadAdapter，这确实将图像编码到我的 ckeditor 数据中以上传到服务器（这很好）。

问题是 base64 编码无效。例如，ckeditor.js 插入空格而不是 +，然后图像变得失真或根本不显示，给出一个 ERR_INVALID_URL。这让我觉得数据不是 URI 编码的。

在 ckeditor.js 文件中，我确实看到了对 encodeURIComponent() 的引用，例如（来自大 blob 的一段代码）： sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r)

奇怪的是，在 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html#demo 的 CkEditor 演示中，将图像放入他们的编辑器并在开发人员工具中查看，它被正确编码。 （我将生成的编码复制并粘贴到浏览器中，图像显示正常）。

  • 我在 Google 和 StackOverflow 上搜索过，似乎没有人遇到这个特殊问题。
  • 我清除了 chrome 缓存并重新安装了 node_modules，但没有帮助。
  • 我没有看到 Base64UploadAdapter 插件的特定配置，（除了限制用户上传某些类型的文件，并且因为默认情况下这个插件接受各种文件类型 - 限制用户不是这里的答案。）立>

我想补充的一件事：这可能与编码问题无关，但以防万一。在线构建器带有一个构建文件夹（我在我的代码中提到了它），但也带有我没有接触或推断的其他文件。我想知道那里是否有我需要构建或参考的代码：

  1. 一个 package.json 文件，包括依赖项。我没有安装它们，因为它们会导致在我的节点模块中重复安装。有没有办法安装唯一的依赖项，即仅安装当前未配置的依赖项？
  2. 一个 我 根本没有引用的 webpack.config.js。 （可能是系统捡到的，我不知道）。

这是我的 my-component.html 代码：

<div>
    <ckeditor [config]="config" [editor]="editor" [(ngModel)]="data"></ckeditor>
</div>

在 my-component.ts 中：

import * as Editor from 'lib/assets/ckeditor64/build/ckeditor';

export class MyComponent{
    
    editor = Editor;
    config = {
        toolbar: {
            items: ['imageUpload','imageInsert',]
        },image: {
            toolbar: [
                'imageStyle:full','imageStyle:side','|','imageTextAlternative'
            ]       
        
        }

    };
    data: string = '';
}

简而言之，我想知道为什么它可能无法将我的图像正确编码到 Base64 中，以及在 Angular 框架中是否有不涉及集成我自己的上传适配器的解决方法（因为我正在使用 CkEditor 的插件无论如何都是自己）。
如果我应该包含其他代码，请告诉我。

非常感谢您。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularbase64base64ckeditor5javascript