CKEditor 5 image resize in Angular

Question

I install CKEditor5 in Angular project, it works fine but i have a problem with resize image. I see the documentation in this link: https://ckeditor.com/docs/ckeditor5/latest/features/image.html#installation but i'm not able to implement it correctly. ImageResize is the only plugin that not active by default, how can i activate? where?

I tried to add it as plugin but i have a error that said there are duplicate declaration of CKEditor5 Here is component code about CKEditor

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/it';

  public Editor = ClassicEditor;

  public config = {
    language: 'it',
    placeholder: 'Descrivi il tuo procedimento scrivendo e inserendo immagini',
    ckfinder: {

      uploadUrl: environment.laravel_api+'/upload-image-step?command=QuickUpload&type=Images&responseType=json',

      options: {
        resourceType: 'Images'
      }
    },
    image: {
      resizeUnit:'%',
      toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],

      styles: [

        'full',

        'alignLeft',

        'alignRight'
      ],

    },

  };

In view i have this

<ckeditor id="editor" style="width: 100%;" [editor]="Editor" [config]="config" data="" formControlName="editor"></ckeditor>

score 8 · Accepted Answer · answered May 30 '20 at 09:10

I was having the same issue but was eventually able to figure it out.

Essentially, I followed the steps outlined here: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

The gist is that if you need plugins, you simply have to use a custom built module.

The following is roughly what I did (using Angular 9)...

First, create the custom build

1. Clone the base repo. I ended up cloning it into the /assets directory within my Angular app

git clone https://github.com/ckeditor/ckeditor5-build-classic.git

2. Within the newly cloned repo, install the @ckeditor/ckeditor5-image package

cd ckeditor5
npm install --save @ckeditor/ckeditor5-image

3. Open and edit the src/ckeditor.js file, and import ImageResize

import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
...

4. Within the same src/ckeditor.js file, add ImageResize to the plugins list

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    Alignment,
    ImageResize, // <----
    ...
];

5. Save the file and build

npm run build

Then, use the build in your Angular app

1. First, ensure that you have the CKEditor Angular component, which still needs to be defined in your app module

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
...
imports: [
    CKEditorModule
    ...
]

2. Finally, use your new custom CKEditor build inside of your component instead of the base one that you were using before:

// Your existing code, which is using a pre-built build
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Should be changed to point to the new custom one in the /assets directory

// Obviously, change to suit your directory structure
import * as ClassicEditor from '../../assets/ckeditor5';

3. That's it! the plugins should now work as described. Just note that you will need to re-build anytime you want to add additional plugins.

I tried this for Base64UploadAdapter and got an error about duplicate modules — Leon Segal, Jul 22 '20 at 15:17
@Leon Segal, If your error was [this one](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules) like mine, try to check versions of all the installed ckeditor5 build and plugins, they should have same major number. Ex: If you have @ckeditor/ckeditor5-core@19.0.1, then make sure all other packages has major version **19** — YGLin, Sep 12 '20 at 15:29

score 1 · Answer 2 · answered Dec 17 '20 at 18:17

import * as ClassicEditor from '../../assets/ckeditor5';

export class ContainerPreguntasComponent implements OnInit, OnDestroy {
title = 'angular-ckeditor-test';
  editor = ClassicEditor; //DecoupledEditor;
  config = {
    placeholder: 'Enunciado de la pregunta.',
    language: 'es',
    image: {
      toolbar: [
        'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
        '|',
        'imageStyle:full',
        'imageStyle:side',
        '|',
        'imageTextAlternative'
      ],
      styles: [
        'full',
        'side',
        'alignLeft', 'alignCenter', 'alignRight'
      ],
      resizeOptions: [
        {
            name: 'imageResize:original',
            label: 'Original',
            value: null
        },
        {
            name: 'imageResize:50',
            label: '50%',
            value: '50'
        },
        {
            name: 'imageResize:75',
            label: '75%',
            value: '75'
        }
    ],
    },
    // Agregas la clase  MyCustomUploadAdapterPlugin para subir imagnes 
    extraPlugins: [MyCustomUploadAdapterPlugin] }
}

 <ckeditor [editor]="editor" [config]="config" (ready)="onReady($event)" ></ckeditor>

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. — Tyler2P, Dec 17 '20 at 18:30

CKEditor 5 image resize in Angular

2 Answers2

First, create the custom build

Then, use the build in your Angular app