ngx-ckeditor5

The CKEditor5 component for angular(2.x,4.x,5.x,6.x).

Before use this component , I think you already use the ckeditor5 on your normal js project.

Installation

• Import CKEditor js file , and language js file , in angular.json or index.html

  "scripts": [
      "node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js",
      "node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js"
   ]

  or

  <script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/decoupled-document/ckeditor.js"></script>
      <script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/decoupled-document/translations/zh-cn.js"></script> 

• Install ngx-cheditor5

  npm i ngx-ckeditor5 --save 
  or
  ng add ngx-ckeditor5(angular6.x)

Sample

Import CkeditorModule module in your main module:

// app.compoennt.ts
import { CkEditorModule } from 'ngx-ckeditor5';
@NgModule({
  imports: [
    // ...
    CkEditorModule
  ],
  // ...
})
export class AppModule { }
 

Then use in in your component :

// app.component.html
<ck-editor [type]="'decoupled'" [uploadConfig]="config" [heading]="heading" [toolbar]="toolbar" [language]="'zh-cn'" [readOnly]="false" [(ngModel)]="content"></ck-editor>

// app.compoennt.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  toolbar = ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'];
  heading = {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
    ]
  };
  config = {
    url: '/springboot/upload',
    useCkfinder: false
  };
  content: any;
}
 

CKEditorComponent options

Type	Name	DataType	Allow Null	Default Value	Description
Input	type	string	Not		Set the ckeditor type[classic, balloon, decoupled, inline],depend on your imported ckeditor's js file.
Input	uploadConfig	{}	Yes	{url:"/",maxSize:"5M", useCkfinder: true}	Default UploadAdapter is CKFinder,but maxSize is invalid,set the useCKFinder to false,use another implementation ,and maxSize is available.
Input	heading	{}	Yes		if is unset, then default the ckeditor's heading.
Input	toolbar	[]	Yes		if is unset then default the ckeditor's toolbar.
Input	language	string	Yes	"en"	toolbar's language,depend on your ckeditor's language js file.
Input	readOnly	boolean	Yes	false	Enable / disable editable.
Two-way	ngModel	string	Yes		Two-way binding the ckeditor's content.

Notices

• This component's property type and imported js relation:

// classic
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>
// ...translations/....js
 
// balloon
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/balloon/ckeditor.js"></script>
// ...translations/....js
 
// decoupled
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/decoupled-document/ckeditor.js"></script>
// ...translations/....js
 
// inline
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/inline/ckeditor.js"></script>
// ...translations/....js

• If you get exception or have trouble on image upload operation, please check your uploadConfig.url ,and your server response have to include url property at least, response.url use to return the uploaded image, and it worked!

Example:

// upload method 
@PostMapping("/upload/one")
    public Map<String, Object> upload(MultipartFile upload) throws IllegalStateException, IOException{
        upload.transferTo(new File("/users/chengyuxing/其他/"+upload.getOriginalFilename()));
        Map<String, Object> map = new HashMap<>();
        map.put("url", "/springboot/image/"+upload.getOriginalFilename()); //not null 
        map.put("uploaded", 1); // allow null 
        map.put("uploadedPercent", 1); // allow null 
        map.put("error", "error"); // allow null 
        return map;
    }
 
// request uploaded image method (is in upload method's response.url) 
@GetMapping("/image/{name}")
    public ResponseEntity<byte[]> image(@PathVariable("name")String name) throws IOException{
        File file = new File("/users/chengyuxing/其他/"+name);
        FileInputStream in = new FileInputStream(file);
        byte[] buffer = new byte[in.available()];
        in.read(buffer);
        in.close();
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.IMAGE_PNG);
        return new ResponseEntity<byte[]>(buffer, headers, HttpStatus.OK);
    }

Update Logs

• 2018-7-16 14:23: fixed the ngModel bug.
• 2018-7-16 18:05: fixed the BalloonEditor's toolbar handle bug.
• 2018-7-18 11:43: update README.md of the uploadAdapter document.