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

<thead>
<tr>
    <th style="width: 15%;">name</th>
    <th style="width: 15%;">type</th>
    <th style="width: 15%;">default</th>
    <th style="width: 15%;">mandatory</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>content</td>
      <td>any</td>
      <td></td>
      <td>No</td>
      <td>Default value to be set in CKEditor</td>
    </tr>
    <tr>
      <td>onChange (Deprecated)</td>
      <td>function</td>
      <td></td>
      <td>No</td>
      <td>Deprecated in v1.0.6. Is now handled via events prop.</td>
    </tr>
    <tr>
      <td>config</td>
      <td>object</td>
      <td></td>
      <td>No</td>
      <td>Configs to be passed in CKEditor</td>
    </tr>
    <tr>
      <td>isScriptLoaded</td>
      <td>boolean</td>
      <td>false</td>
      <td>No</td>
      <td>Pass true if ckeditor script is already loaded in project</td>
    </tr>
    <tr>
      <td>scriptUrl</td>
      <td>string</td>
      <td>Standard CKEditor</td>
      <td>No</td>
      <td>The CKEditor script that needs to be loaded. Pass a custom script with plugins if you need a customized CKEditor.</td>
    </tr>
    <tr>
      <td>activeClass</td>
      <td>string</td>
      <td></td>
      <td>No</td>
      <td>Any Css class to be used with CKEditor container div.</td>
    </tr>
    <tr>
      <td>events (New)</td>
      <td>object</td>
      <td></td>
      <td>No</td>
      <td>An object of custom event handlers so that you can listen to any CKEditor event (Added in v1.0.6)</td>
    </tr>
</tbody>

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.