CKEditor5 for Angular, Base64UploadAdapter for images is not working

Question

I'm having trouble implementing a CKEditor5 for my angular application. My class looks as following:

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],
    };

However, if I comment the "plugins: [Base64UploadAdapter]," it works fine but I cannot add images to the CKEditor5 as base64, if I uncomment the line, I get an "CKEditorError: ckeditor-duplicated-modules". Could you please tell me what am I doing wrong?

Answer 1

I faced the same issue when i trying to upload an image as a base64. Try the following steps hope it will help

Step 1: Do the following changes to the config

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

I hope you have properly install the correct package

npm install --save @ckeditor/ckeditor5-upload

Step 2: Then goto ckeditor.js import Base64UploadAdapter

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

Step 3: Make sure to add base64uploadadapter to builtinPlugins as well which you can find in the same ckeditor.js file

Editor.builtinPlugins = [
       Base64UploadAdapter
]

step 4: build the ckeditor (This step is crucial otherwise no changes will appear in the angular project)

npm run-script build

For more details visit Base64 upload adapter - CKEditor 5 Documentation