Skip to content

BenDevelopment/ng2-ckeditor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular2 - CKEditor component

Use the CKEditor (4.x) wysiwyg in your Angular2 application.

Demo : https://embed.plnkr.co/hnB0R3/

Installation

  • Include CKEditor javascript files in your application :
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
  • Install ng2-ckeditor

    • JSPM : jspm install npm:ng2-ckeditor
    • NPM : npm install ng2-ckeditor
  • SystemJS Config :

  System.config({
    "map": {
      "ng2-ckeditor": "npm:ng2-ckeditor",
    },
    "packages": {
      "ng2-ckeditor": {
        "main": "lib/index.js",
        "defaultExtension": "js",
      },
    }
  });
  • Please consider usage of the plugin divarea of CKEditor (see Issues)

Sample

Include CKEditorModule in your main module :

import { CKEditorModule } from 'ng2-ckeditor';

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

Then use it in your component :

import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#99000'}"
    (change)="onChange($event)"
    (ready)="onReady($event)"
    (blur)="onBlur($event)"
    debounce="500">
  </ckeditor>
  `
})
export class Sample{
  constructor(){
    this.ckeditorContent = `<p>My HTML</p>`;
  }
}

Configuration

Issues

Licence

See LICENCE file

About

Angular2 CKEditor component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%