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