React ckeditor 4/5 Example

Hello Friends,

If you have question how to use ckeditor react js then we are provide full tutorial with example. first you haveto install ckeditor using npm command. then import 'react-bootstrap/Carousel' in your component. then render "" this tag in component. you can also give custom height width.

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

Ckeditor Command

npm install react-ckeditor-component

import React from 'react'
import CKEditor from "react-ckeditor-component";

class CkEditorExample extends React.Component{

    constructor(props) {
        super(props);
        
        this.state = {
            content: 'content',
        }

        this.updateContent = this.updateContent.bind(this);
        this.onChange = this.onChange.bind(this);
    }
 
    updateContent(newContent) {
        this.setState({
            content: newContent
        })
    }
    
    onChange(evt){
      var newContent = evt.editor.getData();
      this.setState({
        content: newContent
      })
      console.log("onChange fired with event info: ", 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(
            <div>
                <CKEditor 
                activeClass="p10" 
                content={this.state.content} 
                events={{
                    "blur": this.onBlur,
                    "afterPaste": this.afterPaste,
                    "change": this.onChange
                }}
                />
            </div>
        )
    }
    
}

export default CkEditorExample;

I hope it can help you...