In this post we will have a look on how to add a CKEditor in Angular Application. CkEditor is a ready-to-use rich text editor which has a number of builds available i.e. Classic, Inline, Balloon and Document. We will have a look at the Classic editor and how to integrate it in Angular application.
We first have to install CKEditor 5 as shown below :
and then install the classic build
and then add it to the imports array
and then assign it to a public property to make it accessible throughout the component
add a config which has a placeholder property
Next add it to the template
Once done, it will look like below
Installation
We first have to install CKEditor 5 as shown below :
npm install --save @ckeditor/ckeditor5-angular
and then install the classic build
npm install --save @ckeditor/ckeditor5-build-classic
Include in App Module
At first import CKEditorModule from '@ckeditor/ckeditor5-angular'import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
and then add it to the imports array
@NgModule({ imports: [ ..., CKEditorModule, ... ]
Use it in Component
At first import the ClassicEditor from '@ckeditor/ckeditor5-build-classic'import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
and then assign it to a public property to make it accessible throughout the component
public Editor = ClassicEditor;
add a config which has a placeholder property
public config = { placeholder: 'Type the content here!' };
Next add it to the template
<ckeditor id="question-body" [(ngModel)]="question.body" [editor]="Editor" [config]="config" name="Body" data="<p></p>" class="body"> </ckeditor>
Once done, it will look like below
No comments:
Post a Comment