Angular CKEditor Component

This is simple CKEditor component for Angular 2 and Angular 4+ applications. Helpful adding powerful feature rich text editor on your angular app.

Angular CKEditor Component

Installation

  • Import CKEditor js file
<script src="//cdn.ckeditor.com/4.7.1/full/ckeditor.js"></script>
  • Install ngx-ckeditor
npm i -S ngx-ckeditor

Sample

Import CKEditorModule module in your main module:

// app.module.ts

import { CKEditorModule } from 'ngx-ckeditor';

@NgModule({
  imports: [
    // ...
    CKEditorModule
  ],
  // ...
})
export class AppModule {

}


Then use it in your component:

// app.component.html

<ck-editor name="editor1" [(ngModel)]="editorValue" skin="moono-lisa" language="en" [fullPage]="true"></ck-editor>
// app.component.ts

@Component({
  selector: 'app',
  templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {

  public editorValue: string = '';

  ngOnInit() { }
}


CKEditorComponent Options

Type Name DataType Default Value Description
Input readonly boolean false Enabled / disable readonly on editor
Input skin string ‘moono-lisa’ Set the editor skin
Input language string ‘en’ Set the editor language
Input fullPage boolean false Enalbed /disable fullPage mode on editor
Input config object {} CKEditor’s config object, see more
Input inline boolean false Set the inline mode
Two-way ngModel string Two-way binding value

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by HstarComponents. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.