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 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, 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 CI version matrix, use:

pnpm run test:integration

This command runs against the ckeditor5 packages 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, copy .env.example to .env, fill in CKEDITOR_LICENSE_KEY, and then install the matching lts-v* packages:

cp .env.example .env
# fill in CKEDITOR_LICENSE_KEY in .env

pnpm add -D ckeditor5@lts-v47 ckeditor5-premium-features@lts-v47
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

Releasing package

Prerequisites

CircleCI automates the release process and can release both channels: stable (X.Y.Z) and pre-releases (X.Y.Z-alpha.X, etc.).

Before you start, you need to prepare the changelog entries.

1. Make sure the #master branch is up-to-date: git fetch && git checkout master && git pull.
2. Prepare a release branch: git checkout -b release-[YYYYMMDD] where YYYYMMDD is the current day.
3. Generate the changelog entries: pnpm run release:prepare-changelog.
   • You can specify the release date by passing the --date option, e.g., --date=2025-06-11.
   • By passing the --dry-run option, you can check what the script will do without actually modifying the files.
   • Read all the entries, correct poor wording and other issues, wrap code names in backticks to format them, etc.
   • Add the missing the/a articles, () to method names, "it's" -> "its", etc.
   • A newly introduced feature should have just one changelog entry – something like "The initial implementation of the FOO feature." with a description of what it does.
4. Commit all changes and prepare a new pull request targeting the #master branch.
5. Ping the @ckeditor/ckeditor-5-platform team to review the pull request and trigger the release process.

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.