Skip to content
页面概要

CKEditor

CKEditor 组件基于 CKEditor 5 封装,是一款 富文本编辑器;CKEditor 官网

Props

名称类型默认值说明
valueString编辑器的内容.
toolbarsstring[]CKEditorConfig.toolbar编辑器 工具栏 配置.
onChangeFunction(data: string, editor: any, event: any)
onFocusFunction(event: any, editor: any)
onBlurFunction(event: any, editor: any)
onReadyFunction(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

Example

在线链接

卸载

如果你不需要此组件,然后代码打包感觉不需要,可以卸载此组件。

1、CMD 运行

pnpm remove @ckeditor/ckeditor5-build-decoupled-document @ckeditor/ckeditor5-react
1

2、删除组件文件目录 @/components/CKEditor

Released under the MIT License.