React integration

[szymonkups]

Part of: #1002.
We should provide at least two ways to integrate with React

• when using builds,
• building together with the React project.

Using buids

When someone will like to use ready-to-use builds without building CKEditor together with the project. It should be simple as installing dependencies:

npm i ckeditor5-react ckeditor5-build-classic

And then using CKEditor integration inside React application:

import ClassicEditor from 'ckeditor5-build-classic';
import CKEditor from 'ckeditor5-react';

<CKEditor 
  editor={ ClassicEditor } 
  config={ { ... } } 
  data="<p>This is CKEditor instance.</p>"
/>

Building together with React project

We should also provide a way to integrate editor's building process with react appliction. Integrator should be able to install CKEditor 5 plugins into the project:

npm i ckeditor5-react ckeditor5-editor-classic ckeditor5-essentials

and create custom build:

import ClassicEditor from 'ckeditor5-editor-classic';
import Essentials from 'ckeditor5-essentials';
import CKEditor from 'ckeditor5-react';

<CKEditor 
  editor={ ClassicEditor } 
  config={ { plugins: [ Essentials ] } }
  data="<p>This is CKEditor instance.</p>"
>

We shuld provide a guide how to achieve this when using ReactCLI as the starting point. Custom webpack configuration for React and CKEditor 5 would be cool too.

How do we expose editor API?

Getting data

We should allow to set a callback that will be fired each time editor contents changed:

<CKEditor onChange={ data => console.log( data )  } />

Other

What else should be exposed? Or maybe we should provide some way to access underlying editor instance for more advanced integration scenarios?

[lsy9108]

npm i --save ckeditor5-react
npm ERR! code E404
npm ERR! 404 Not Found: ckeditor5-react@latest

[Reinmar]

Hi! It's not yet published. You can find the early version of this package in https://github.com/ckeditor/ckeditor5-react. And you can follow the progress there.

[pomek]

The first version has just been published.

Now using npm install @ckeditor/ckeditor5-react will install the package in version 1.0.0-beta.1.

The feedback is welcomed.

[pomek]

In case of problems, please report an issue here - https://github.com/ckeditor/ckeditor5-react

[SKGGitHub]

Hello Team, We had shortlisted CKeditor5 to be used in one of new project as an Rich text editor.

While trying to integrate it in our React application using similar code mentioned in "Building together with React Project", we are facing different issues in different implementations:

1. <CKEditor editor={ ClassicEditor } config={ { plugins: [ Essentials ] } }
   data="

   This is CKEditor instance.

   ">

Specifying above code give error of "Cannot read getAttribute on null object"

2. Specifying above code without config attribute, throws no error but editor doesn't shows up. But empty div is rendered without any editor, toolbar or content.

Any help is highly appreciated.

[pomek]

Could you report an issue in here – https://github.com/ckeditor/ckeditor5-react/issues?

I will appreciate an instruction step by step that you've done. Would be good if it allows reproducing the issue.

[pomek]

PS: The error: "Cannot read getAttribute on null object" means that your webpack configuration misses a proper loader.

The same issue we had here – ckeditor/ckeditor5-react#21 (comment).