ckeditor/ckeditor5-react

CKEditor 5 rich text editor component for React

Official CKEditor 5 rich text editor component for React.

Developer Documentation 📖

See the "Rich text editor component for React" guide in the CKEditor 5 documentation to learn more:

• Quick start
• Using CKEditor 5 Builder
• Installing from npm
• Component properties

Contributing

[!NOTE] This project requires pnpm v10 or higher. You can check your version with pnpm --version and update if needed with npm install -g pnpm@latest.

After cloning this repository, install necessary dependencies:

pnpm install

If you need to run tests or demos with a commercial license, copy .env.example to .env and fill in the required CKEDITOR_* variables. Keep .env local only. In CI, provide the same value via the CKEDITOR_LICENSE_KEY environment variable.

Running the development server

To manually test the editor integration with different versions of React, you can start the development server using one of the commands below:

pnpm run dev:16 # Open the demo projects using React 16.
pnpm run dev:17 # Open the demo projects using React 17.
pnpm run dev:18 # Open the demo projects using React 18.
pnpm run dev:19 # Open the demo projects using React 19.

Executing tests

To run the full automated test suite, use:

pnpm run test

To run only the real-editor integration suite used by the CI version matrix, use:

pnpm exec vitest run --project integration

This command runs the integration subset against the ckeditor5 and ckeditor5-premium-features versions currently installed in node_modules. After a regular pnpm install, that means the default dependency versions from package.json, not the LTS version from the CI matrix.

To reproduce an LTS matrix run locally, install the matching lts-v* packages first and provide CKEDITOR_LICENSE_KEY, just like the CI job does:

pnpm add -D ckeditor5@lts-v* ckeditor5-premium-features@lts-v*
CKEDITOR_LICENSE_KEY=<your-key> pnpm exec vitest run --project integration

If you want to run the tests in watch mode, use the following command:

pnpm run test:watch

Building the package

To build the package that is ready to publish, use the following command:

pnpm run build

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.