/

ckeditor富文本应用(一)

之前在博客应用过这个插件,后来转成了marked.js。最近公司需要研究富文本编辑器。因此整理了一下。

ckeditor提供了五种类型的编辑器,可以根据自己的需求选择

以下是引入的几种引入方式

一、script标签引入

可以通过script标签引入,removePlugins删除多余组件。
文档demo

1
2
// 查看所有的组件 console.log(Array.from(editor.ui.componentFactory.names()))

二、使用angular、vue、react等框架

可以参照文档 angular

angular使用方案

博客之前的应用方案 html

1
2
3
4
5
6
7
<ckeditor [editor]="Editor" [data]="data" [disabled]="false" [config]="config" (ready)="onReady($event)" (blur)="onChange($event)"></ckeditor>

继承ControlValueAccessor类,可以直接配合form使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@Component({ selector: 'app-ckeditor', templateUrl: './ckeditor.component.html', styleUrls: ['./ckeditor.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR,//值 useExisting: forwardRef(() => CkeditorComponent), multi: true }, { provide: NG_VALIDATORS,//校验 useExisting: forwardRef(() => CkeditorComponent), multi: true//令牌多对一 } ] }) export class CkeditorComponent implements ControlValueAccessor { public data: string = '' private propageteChange = (_: any) => { }; //ckeditor配置 public Editor = DecoupledEditor; public config = { language: 'zh-cn', }; constructor() { } writeValue(obj: any): void { this.data = obj; } registerOnChange(fn: any): void { this.propageteChange = fn; } registerOnTouched(fn: any): void { } validate(c: FormControl): { [key: string]: any } { return this.data ? null : { editorInvalid: { valid: false } } } onReady(editor) { editor.ui.view.editable.element.parentElement.insertBefore( editor.ui.view.toolbar.element, editor.ui.view.editable.element ); editor.plugins.get('FileRepository').createUploadAdapter = function (loader) { return new FileUploadAdapter(loader); }; } onChange({ editor }: ChangeEvent) { this.data = editor.getData(); this.propageteChange(this.data) } } class FileUploadAdapter { constructor(private loader) { } upload() { return new Promise((resolve, reject) => { const data = new FormData(); data.append('file', this.loader.file); var xhr = new XMLHttpRequest(); // xhr.setRequestHeader("Content-type","multipart/form-data"); xhr.open('post', '/api/uploadpic'); xhr.send(data); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { let data = JSON.parse(xhr.responseText); if (data.fileName) { resolve({ default: '/api' + data.fileName }); } else { reject(data.msg); } } }; }); } abort() { } }

封装成了组件,可以直接使用:

1
<app-ckeditor formControlName="content"></app-ckeditor>

三、npm打包

如果想定制化开发,减小体积,使ckeditor更加符合项目需求 下一篇将详细介绍

作者:liuk123标签:js分类:javascript

本文是原创文章,采用 CC BY-NC-ND 4.0 协议, 完整转载请注明来自 liuk123