react-ckeditor-component
React component for CKEditor
Installation
Usage
import CKEditor from "react-ckeditor-component";
class Example extends Component {
constructor(props) {
super(props);
this.updateContent = this.updateContent.bind(this);
this.state = {
content: 'content',
}
}
updateContent(newContent) {
this.setState({
content: newContent
})
}
onChange(evt){
console.log("onChange fired with event info: ", evt);
var newContent = evt.editor.getData();
this.setState({
content: newContent
})
}
onBlur(evt){
console.log("onBlur event called with event info: ", evt);
}
afterPaste(evt){
console.log("afterPaste event called with event info: ", evt);
}
render() {
return (
<CKEditor
activeClass="p10"
content={this.state.content}
events={{
"blur": this.onBlur,
"afterPaste": this.afterPaste,
"change": this.onChange
}}
/>
)
}
}
The package also includes an in-built example under the /example
folder. Run the sample application by cloning project and running npm start.
Props
name | type | default | mandatory | description |
---|
content | any | | No | Default value to be set in CKEditor |
onChange (Deprecated) | function | | No | Deprecated in v1.0.6. Is now handled via events prop. |
config | object | | No | Configs to be passed in CKEditor |
isScriptLoaded | boolean | false | No | Pass true if ckeditor script is already loaded in project |
scriptUrl | string | Standard CKEditor | No | The CKEditor script that needs to be loaded. Pass a custom script with plugins if you need a customized CKEditor. |
activeClass | string | | No | Any Css class to be used with CKEditor container div. |
events (New) | object | | No | An object of custom event handlers so that you can listen to any CKEditor event (Added in v1.0.6) |
Note- Starting v1.0.6, you can listen to change
event directly by passing its event handler in events
prop instead of passing a separate onChange prop. The onChange prop is now deprecated.
License
react-ckeditor-component
is released under the MIT license
.