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.
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:
import { CKEditorModule } from 'ngx-ckeditor';
@NgModule({
imports: [
CKEditorModule
],
})
export class AppModule {
}
Then use it in your component:
<ck-editor name="editor1" [(ngModel)]="editorValue" skin="moono-lisa" language="en" [fullPage]="true"></ck-editor>
@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.