React WYSIWYG HTML Editor | Rich Text Editor

Run CKEditor 5 React project in a minute

Set up the editor in your local environment using one command.

npx create-react-app ckeditor5-classic-demo --template @ckeditor/ckeditor5-classic

Check the integration guide

Versatile

An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.

Explore features

Extensible

Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.

Create a plugin

Progressive

Takes advantage of a superb team of 40+ industry experts and 19 years of experience in WYSIWYG editing. We are releasing new features every month.

See GitHub

Trusted and approved by

Simple setup

Here is a quick example of how to use the React Rich Text Editor component for CKEditor 5 by using create-react-app!

Create a project

Create a project using a basic create-react-app template and change the working directory to a newly created project.

npx create-react-app ckeditor5-react-example && cd ckeditor5-react-example

Install packages

Install dependencies to Rich Text Editor React Component and a chosen Editor Type according to the editing experience of your preference. In this case, we use the classic one.

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Add the component

Replace contents of src/App.js with code responsible for importing and the initialization of the editor.

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default function App() {
  return (
    <div className='App'>
      <h2>CKEditor 5 React App</h2>
      <CKEditor
        editor={ ClassicEditor }
        data="<p>Hello from CKEditor 5!</p>"
        onReady={ ( editor ) => {
          console.log( "CKEditor5 React Component is ready to use!", editor );
        } }
        onChange={ ( event, editor ) => {
          const data = editor.getData();
          console.log( { event, editor, data } );
        } }
      />
    </div>
  );
}

Done!

That’s it! Run the app by executing the following command in your project's directory.

npm run start

React Rich Text Editor