Ngx-ckeditor5 NPM

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"
 ]

<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 typeclassic, 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);
	}