CODEWITHSUNDEEP
angularckeditor5
The KNVB
The KNVB

Reputation: 3844

How to use online build CKEditor in angular?

I want to embed the ckeditor into a Material Tabs. I want to the editor support font color feature, so I build the ckeditor online from the following link:

https://ckeditor.com/ckeditor-5/online-builder/

And then install the CKEditor 5 WYSIWYG editor component for Angular by the following command:

npm install --save @ckeditor/ckeditor5-angular

According to the instruction in the below web page, I copy the ckeditor.js and corresponding translation files to the src directory and import it to the component file; and then modify the tsconfig.json.

However, the editor does not show.

how can I configure the editor so that it can support font color feature?

Here is the stackBlitz.

Upvotes: 0

Views: 1904

Answers (1)

Parth Raval
Parth Raval

Reputation: 4423

According to ckeditor5 document You need to follow this steps:-

  1. You need to install npm install --save @ckeditor/ckeditor5-angular && npm install --save @ckeditor/ckeditor5-build-classic as CKeditor dependancy.

  2. Import CKeditor Module import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; in main app module. && add CKEditorModule in imports.

    @NgModule({ imports: [ CKEditorModule ] })

  3. Add dependency in app.component like import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

  4. add in public Editor = ClassicEditor; in app component like this.

    export class AppComponent { public Editor = ClassicEditor; }

  5. add in .html file like <ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Hope this helps you :-)

Working example CKEditor example

Upvotes: 1

Related Questions