react-ckeditor5-component

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

Name	Type	Default	Mandatory	Description
name	string	'CKEDITOR5'	NO	This will the 'id' of the dom element you would like to add editor on
type	string	'classic'	NO	type of the editor: classic, inline, ballon, decoupled
config	object		NO	CKEDITOR5 config object(Like from the API document)
content	any(either tags or string preferrably)		NO	default content to start with
width	string		NO	width of the editor(ex. '500px')
height	string		NO	height of the editor(ex. '500px')
className	string		NO	custom className to the editor if you want
onChange	function		NO	onChange event to retrieve data. The return value would be same as eidtor.getData() value from the regular ckeditor

Licence

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