As of 18-06-27

I thought I added the onChange property but I was passing some weird value. But it's fixed now! You can check the editor content by assinging onChange of your own. It passes the content value as a param, see the example for the usage.

By the way, frankly i have never been a ckeditor user since a few weeks ago, so I'm wondering what kinds of event handlers are preferred or needed. Inform me on github then I will add the requested(Don't need to be just events) as soon as possible.

Install

https://www.npmjs.com/package/react-ckeditor5-component

npm install react-ckeditor5-component

in document: import CKEDITOR5 from 'react-ckeditor5-component';

Feature

Based on the lastest version of CKEditor5, providing ONLY standard edition currently. As a prop, you can choose classic, balloon, inline, and decoupled-document

[NOTE] Event handles haven't been added yet, will soon.

usage

For some reason, cannot get github demo working properly, you can pull from the repo and run locally if want.

import React from 'react';
import { render} from 'react-dom';
import CKEDITOR5 from 'react-ckeditor5-component';
const App = () => (
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      content: '',
    }

    this.onChange = this.onChange.bind(this);
  }

  onChange( content ) {
    console.log( content );
    this.setState({
      content: content,
    })
  }

  render(){
    return (
      <div style={{border:'1px solid black'}}>
        <CKEDITOR5
          type="inline"
          height="500px"
          onChange = {this.onChange}
          />

        <p style={{borderTop: '1px solid black'}}>
          <div>this is where data is displayed </div>
          {this.state.content}
        </p>

        <p style={{borderTop: '1px solid black'}}>
          border has been given to show there is a div component right below the editor.<br></br>
        type is inline, and height has been given '500px'
        </p>
      </div>
    );
  }
};
render(<App />, document.getElementById("root"));

Props

also become

Licence

Source code can be found on github, licenced under MIT.