CODEWITHSUNDEEP
angularimage-resizingckeditor5
Drilon Hametaj
Drilon Hametaj

Reputation: 140

CKEditor 5 image resize in Angular

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>

Upvotes: 6

Views: 7453

Answers (2)

Brayan Huaman Villanueva
Brayan Huaman Villanueva

Reputation: 11

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>

Upvotes: 1

Jesse Williams
Jesse Williams

Reputation: 446

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.

Upvotes: 8

Related Questions