Hi I have been trying to integrate the ckeditor5 with angular app and followed instruction given in the document.
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html
Normal ckeditor5 is working but when i'm trying to enable ckfinder with it, it is not working. Specifically I'm trying to upload an image to server, and need to do some basic operations like image reszing metioned in the CKFinder. As per the doc, when we click on the ckfinder button , it should open the modal box but right now its not opening "
Appreciate your time and thanks in advance
I'm pasting my files for your reference
app.component.html
<ckeditor
[(ngModel)]="model.editorData"
[editor]="Editor"
[config]="{
toolbar: ['ckfinder'],
ckfinder: {
options: {
resourceType: 'Images'
},
uploadUrl: 'http://localhost:3000/test/upload/iamge'
}
}"
></ckeditor>
app.component.ts
import { Component } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ckeditor2';
public Editor = ClassicEditor;
public model = {
editorData: '<p>Hello, world!</p>'
};}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgxEditorModule,
HttpClientModule,
AngularFontAwesomeModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
