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