CKEditor 5 rich text editor component for Vue.js 3+

⚠️ This repository contains the CKEditor 5 component for Vue.js 3+. The component for lower Vue.js versions is located in another repository - @ckeditor/ckeditor5-vue2.

Official CKEditor 5 rich text editor component for Vue.js.

Developer Documentation 📖

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

• Quick start
• Using CKEditor 5 builder
• Installing from npm
• Using component locally
• Component directives
• Component events

Contributing

Note

This project requires pnpm v12.8.2. You can check your version with pnpm --version and update if needed with npm install -g pnpm@12.8.2.

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.

Running the development server

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

pnpm run dev

Executing tests

To run the full automated test suite, use:

pnpm run test

To run only the real-editor integration test used by the tests_integration CI job, use:

pnpm run test:integration

This command runs against the ckeditor5 packages currently installed in node_modules. After a regular pnpm install, these are the versions locked in pnpm-lock.yaml, which may be older than the latest versions that the CI job installs.

To reproduce the tests_integration CI job locally, install the latest packages first:

pnpm add -D ckeditor5@latest ckeditor5-premium-features@latest
pnpm run test: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.