ReactJS中使用CKeditor 笔记

背景

最近在用ReacJS写一个小的前端项目，需要将编辑框改成富文本框，网上搜索了一下，觉得CKeditor比较好看，这里记录一下实现的步骤。

使用版本

ReactJS 16.8.6
CKeditor-5

步骤

1.安装组件

首先安装两个组件ckeditor5-react和ckeditor5-build-classic

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

2.导入组件

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

3.调用组件

 <CKEditor
                    editor={ ClassicEditor }
                    data={this.state.detail}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                      const data = editor.getData();
                        this.setState({
                          detail:data
                        });
                        
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }