'ckeditor' is not a known element Ionic 4 - ionic-framework

Question

I am working on an Ionic project. I am trying to integrate the CKEditor module on my project.
<ckeditor [(ngModel)]="content" editor="Editor">
</ckeditor>
I am getting an error though:
'ckeditor' is not a known element.
So, I tried some solutions, which I have found on the internet, but unfortunately, nothing worked for me.
I tried including the CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA. I included the FormsModule, but no chance.
I was wondering, if you could help me, please?
Thank you in advance.

Answer 1

so i solved the problem. I did the following:
var textarea = document.getElementById('editor1');
const ClassicEditor = require( '#ckeditor/ckeditor5-build-classic' );
ClassicEditor.create( document.getElementById( 'editor1' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );

Answer 2

install both these packages in your angular or angular-ionic app.
npm install --save #ckeditor/ckeditor5-angular
npm install --save #ckeditor/ckeditor5-build-classic
then import in module app.module.ts, and use it in component.
import * as CKEditor from '#ckeditor/ckeditor5-build-classic';
#Component({
selector: 'app-editor',
template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
styleUrls: ['./edit-summary.component.scss']
})
export class EditorComponent {
summary: string = `<p>Lorem ipsum</p>`
public editor = CKEditor
constructor() {
}
}
If ckeditor is not found then read following:
i.e. you have component summary.component and it is declared in summary.module then it is necessary to import CKEditorModule in summary.module.
let say you have summary.module.ts like:
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
#NgModule({
declarations: [
SummaryComponent
],
imports: [
CommonModule,
CKEditorModule,
],
exports: [
SummaryComponent
],
})
export class SummaryModule { }
then import CKEditor in summary.component.ts
import * as CKEditor from '#ckeditor/ckeditor5-angular';
#Component({
selector: 'app-edit-summary',
template: '<ckeditor [editor]="editor" [data]="summary"></ckeditor>',
styleUrls: ['./edit-summary.component.scss']
})
export class EditSummaryComponent {
summary: string = `<p>Lorem ipsum</p>`
public editor = CKEditor
constructor() {
}
}