react-ckeditor5-component

Install

https://www.npmjs.com/package/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 '../../src';
const App = () => (
  <div style={{border:'1px solid black'}}>
    <CKEDITOR5
      type="inline"
      height="500px"
      />

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