Appearance
CKEditor
CKEditor 组件基于 CKEditor 5
封装,是一款 富文本编辑器;CKEditor
官网。
Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 编辑器的内容. | |
toolbars | string[] | CKEditorConfig.toolbar | 编辑器 工具栏 配置. |
onChange | Function(data: string, editor: any, event: any) | ||
onFocus | Function(event: any, editor: any) | ||
onBlur | Function(event: any, editor: any) | ||
onReady | Function(editor: any) |
上传图片
组件统一了整个后台编辑器的上传图片api地址。相关代码如下,你可以自定义修改:
import React from 'react';
import request from '@/utils/request';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';
// import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh'; // 繁体
import styles from './index.module.less';
export const CKEditorConfig = {
toolbar: [
'heading',
'|',
'fontfamily',
'fontsize',
'fontColor',
'fontBackgroundColor',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'indent',
'outdent',
'|',
'link',
'blockquote',
'imageUpload',
'insertTable',
'mediaEmbed',
'|',
'undo',
'redo',
],
language: 'zh-cn',
};
export interface CKEditorProps {
value: string;
toolbars?: string[];
onChange?: (data: string, editor: any, event: any) => void;
onBlur?: (event: any, editor: any) => void;
onFocus?: (event: any, editor: any) => void;
onReady?: (editor: any) => void;
}
const Editor: React.FC<CKEditorProps> = (props) => {
const { toolbar, ...config } = CKEditorConfig;
const { value = '', toolbars = toolbar, onChange, onBlur, onFocus, onReady } = props;
let thisEditor: any = null;
return (
<div className={styles['document-editor']}>
<CKEditor
editor={DecoupledEditor}
config={{
toolbar: toolbars,
...config,
}}
data={value}
onReady={(editor: any) => {
// console.log( 'Editor is ready to use!', editor );
editor.ui
.getEditableElement()
.parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) =>
// let val = editor.getData();
({
upload: async () => {
return await loader.file.then((f: any) => {
// console.log("file:", f);
const param = new FormData();
param.append('file', f);
return new Promise((resolve, reject) => {
request({
url: '/uploads',
headers: { 'Content-Type': 'multipart/form-data' },
method: 'POST',
data: param,
})
.then((res) => {
const { data } = res as any;
resolve({
default: data.url || '',
});
})
.catch((err) => {
console.log(err);
reject(err);
});
});
});
},
});
thisEditor = editor;
if (onReady) {
onReady(editor);
}
}}
onError={({ willEditorRestart }: { willEditorRestart: boolean }) => {
if (willEditorRestart) {
thisEditor.ui.view.toolbar.element.remove();
}
}}
onChange={(event: any, editor: any) => {
const data = editor.getData();
// console.log( { event, editor, data } );
if (onChange) {
onChange(data, editor, event);
}
}}
onBlur={(event: any, editor: any) => {
// console.log( 'Blur.', editor );
if (onBlur) {
onBlur(event, editor);
}
}}
onFocus={(event: any, editor: any) => {
// console.log( 'Focus.', editor );
if (onFocus) {
onFocus(event, editor);
}
}}
/>
</div>
);
};
export default Editor;
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
Example
卸载
如果你不需要此组件,然后代码打包感觉不需要,可以卸载此组件。
1、CMD 运行
pnpm remove @ckeditor/ckeditor5-build-decoupled-document @ckeditor/ckeditor5-react
1
2、删除组件文件目录 @/components/CKEditor