Versatile
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
Extensible
Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.
Progressive
Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.
Simple setup
Here is a quick example of how to use the Angular Rich Text Editor
component for CKEditor 5 by using Angular CLI!
1
Create a project
Create a project using an Angular CLI and change
the working directory to a newly created project.
npx @angular/cli new ckeditor5-angular && cd ckeditor5-angular2
Install packages
Install dependencies to Angular Text Editor Component and a chosen Editor Type
according to the editing experience of your preference. In this case, we use the classic one.
npm install ckeditor5 @ckeditor/ckeditor5-angular3
Add a component
Replace contents of src/app/app.component.ts with code responsible for importing and the initialization of the editor.
import { Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import {
ClassicEditor,
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
@Component( {
selector: 'app-root',
templateUrl: './app.component.html',
imports: [ CKEditorModule ],
standalone: true
} )
export class AppComponent {
title = 'angular';
public Editor = ClassicEditor;
public config = {
toolbar: [
'undo', 'redo', '|',
'heading', '|', 'bold', 'italic', '|',
'link', 'insertTable', 'mediaEmbed', '|',
'bulletedList', 'numberedList', 'indent', 'outdent'
],
plugins: [
Bold,
Essentials,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
Undo
]
}
}
4
Add a template
Replace the contents of src/app/app.component.html with the code responsible for controlling the editor.
<ckeditor [editor]="Editor" [config]="config" data="<h1>Hello from CKEditor 5!</h1>"></ckeditor>
5
Done!
Run the app by executing the following command
in your project's directory.
npm run start6
Explore the documentation
Congratulations on setting up CKEditor! To make the most of it, visit the CKEditor documentation
for comprehensive guidance on how to fully customize and integrate the editor.