CKEditor 4 - Integrate WYSIWYG editor with React

We are happy to announce the release of the native integration of CKEditor 4, a full-featured WYSIWYG editor, with React, one of the most popular JavaScript frameworks. The CKEditor 4 React integration is already available on npm. It allows you to implement CKEditor 4 as a React component, using the <CKEditor /> JSX tag.

# WYSIWYG editor that fits your needs

We try to make installing and integrating CKEditor 4 as simple and intuitive as possible. Therefore, CKEditor 4 builds are available on npm, CDN and as zip packages. With a native component for React, we want to make the process of integrating the WYSIWYG editor even faster.

CKEditor 4 offers plenty of features to fit all editing needs. You can easily customize it and create your own build with a carefully selected set of features with the online builder.

# Is CKEditor 4 compatible with framework XYZ?

Yes. CKEditor 4 is compatible with every JavaScript framework that we have heard of so far. CKEditor 4 is a JavaScript rich-text editing component and it does not require any uncommon techniques or technologies to be used. Therefore, unless the framework that you use has very not typical limitations, CKEditor 4 is compatible with it.

A dedicated CKEditor 4 component for React simplifies the process of integrating the WYSIWYG editor with this popular framework. Similar integrations are available for Angular and Vue.js.

# WYSIWYG editor for React

In order to start using CKEditor 4 in your React application, install the ckeditor4-react npm package as a dependency of your project:

npm install --save ckeditor4-react

After installing, the CKEditor 4 WYSIWYG editor React component can be imported in your JavaScript code:

import CKEditor from 'ckeditor4-react';

A sample App component below shows the basic <CKEditor /> component usage:

import React, { Component } from 'react';
import CKEditor from 'ckeditor4-react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Using CKEditor 4 in React</h2>
          <CKEditor
            data="<p>Hello from CKEditor 4!</p>"
        />
      </div>
    );
  }
}

export default App;

The data property used in the example is responsible for setting the initial editor data.

By default, the WYSIWYG editor React integration will fetch the latest CKEditor 4 version from the CKEditor CDN. The CKEditor build, the editor type and other configuration options can be easily customized. You can learn more in the official CKEditor 4 React integration guide.

# Try it out!

We have created a few samples that show the integration of CKEditor 4 WYSIWYG editor component with React.

Check them out to see how to create an editor component and change its type, overwrite its configuration or bind an event handler. Additionally, see how to create a simple two-way data binding between the CKEditor 4 WYSIWYG editor component and other components, using the internal state of React components.

# Feedback

After a short beta phase, a stable release of the CKEditor 4 React integration was published on October 10, 2019. We are awaiting your feedback and ideas on how it can be improved further. We also want to thank the community for all comments and issues already reported. Please keep them coming and help us improve the CKEditor 4 WYSIWYG editor React integration!

At the same time, we are looking forward to hearing what other frameworks we should support with a native CKEditor 4 WYSIWYG editor integration. The Angular and Vue.js integrations are already supported!