Use official version @ckeditor/ckeditor5-angular instead.

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.

• 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)

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;
}

• 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);
	}

• 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.