https://github.com/codeslayer1/react-ckeditor

CKEditor component for React with plugin and custom event listeners support
https://github.com/codeslayer1/react-ckeditor

ckeditor npm npm-module npm-package react react-ckeditor react-component react-library

Last synced: about 5 hours ago
JSON representation

CKEditor component for React with plugin and custom event listeners support

• Host: GitHub
• URL: https://github.com/codeslayer1/react-ckeditor
• Owner: codeslayer1
• License: mit
• Created: 2017-06-15T07:29:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-09-20T13:14:00.000Z (over 3 years ago)
• Last Synced: 2024-12-01T00:07:44.299Z (22 days ago)
• Topics: ckeditor, npm, npm-module, npm-package, react, react-ckeditor, react-component, react-library
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 130
• Watchers: 8
• Forks: 34
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-ckeditor-component

**React component for CKEditor**

## Installation

[![react-ckeditor-component](https://nodei.co/npm/react-ckeditor-component.png)](https://npmjs.org/package/react-ckeditor-component)

## Usage

```js

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 (

            

        )

    }

}

```

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`.