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>
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)...
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
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, If your error was this one 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
This also worked in nuxtjs
Thanks a lot @Jesse It worked like a charm!