Angular 的 CKEditor5，图像的 Base64UploadAdapter 不工作

Question

我在为我的 angular 应用程序实施 CKEditor5 时遇到问题。我的 class 如下所示：

import * as customEditor from './ckeditor5';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

export class MemoComponent extends BaseFieldComponent implements OnInit {
    public customEditor = customEditor;
    public environment = environment;
    public config = {
        language: this.environment.locale,
        toolbar: [
            'undo',
            'redo',
            '|',
            'heading',
            'fontFamily',
            'fontSize',
            '|',
            'bold',
            'italic',
            'underline',
            'fontColor',
            'fontBackgroundColor',
            'highlight',
            '|',
            'link',
            'CKFinder',
            'imageUpload',
            'mediaEmbed',
            '|',
            'alignment',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'insertTable',
            'blockQuote',
            'specialCharacters',
        ],
        plugins: [Base64UploadAdapter],
    };

但是，如果我评论“插件：[Base64UploadAdapter]”，它工作正常，但我无法将图像作为 base64 添加到 CKEditor5，如果我取消注释该行，我会得到一个“CKEditorError：ckeditor-duplicated-modules ”。你能告诉我我做错了什么吗？

Answer 1

我在尝试将图像上传为 base64 时遇到了同样的问题。尝试以下步骤希望对您有所帮助

第 1 步：对配置进行以下更改

public config = {
    language: this.environment.locale,
    toolbar: [ ... ],
    ckfinder: {
      options: {
          resourceType: 'Images'
      },
    },
 }

希望您已正确安装正确的软件包

npm install --save @ckeditor/ckeditor5-upload

第 2 步： 然后转到 ckeditor.js 导入 Base64UploadAdapter

import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

第 3 步：确保将 base64uploadadapter 添加到 builtinPlugins 中，您可以在同一个 ckeditor.js 文件中找到它

Editor.builtinPlugins = [
       Base64UploadAdapter
]

第 4 步： 构建 ckeditor（此步骤至关重要，否则 angular 项目中不会出现任何更改）

npm run-script build

有关详细信息，请访问 Base64 upload adapter - CKEditor 5 文档

Angular 的 CKEditor5，图像的 Base64UploadAdapter 不工作

CKEditor5 for Angular, Base64UploadAdapter for images is not working

angular

typescript

ckeditor5