Repository files navigation

This package provides a custom field for Strapi 5 that lets you use and configure CKEditor in no time.

Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.

This is an official plugin, provided to you by theCKEditor team 👋

• No code field customization: customize each field for its specific usage scenario – let it be short note, blog article, or a document.
• Predefined editor presets: a couple predefined editor presets (sets of CKEditor 5 plugins and their configuration) to choose from.
• Custom max length validation: Twitter-like length validation with visual indicators, based on the number of characters in the text, not the HTML string.
• Dark mode support: because you like it.
• Media library integration: inserting images directly from Strapi's media library.
• More features coming soon: upload adapter integration, more granular editor toolbar and plugins configuration, and more.

Inside your Strapi app, add the package:

Withnpm:

npm install @ckeditor/strapi-plugin-ckeditor

Withyarn:

yarn add @ckeditor/strapi-plugin-ckeditor

Then, add the Content Security Policy configuration to allow loading CKEditor 5 fromhttps://cdn.ckeditor.com origin and sending the editor usage information tohttps://proxy-event.ckeditor.com, by adding the rule toconfig/middlewares.ts in your Strapi project root:

exportdefault[// ...{name:'strapi::security',config:{contentSecurityPolicy:{useDefaults:true,directives:{'script-src':['https://cdn.ckeditor.com'],'connect-src':['https://proxy-event.ckeditor.com']},},},},// ...

Finally run build:

npm run build

or:

yarn build

This section covers the way how to configure your environment if you want to contribute to this package.

In order to start making changes in the plugin you first need to install Strapi infrastructure on top of the plugin repository.

npx create-strapi-app --quickstart strapicd strapi

By default Strapi does not create plugins folder so we need to create it.

mkdir -p src/plugins

Now we should clone this repository so we can work on it.

git clone git@github.com:ckeditor/strapi-plugin-ckeditor.git src/plugins/strapi-plugin-ckeditor

Let's add an entry inside./package.json file so, we won't need to useyarn inside plugin itself.

"workspaces": ["./src/plugins/strapi-plugin-ckeditor"]

Install dependencies:

yarn install

Now we need to register plugin so strapi can use it. In order to do that we needto create (if not already created)./config/plugins.js file and add entry to it.

module.exports = ({ env }) => ({  ckeditor: {    enabled: true,    resolve: "./src/plugins/strapi-plugin-ckeditor"  },});

Rebuild the project and start the server:

yarn buildyarn develop

Starting from version 1.0.0, the CKEditor 5 custom field plugin is compatible with Strapi 5 and can't be used in Strapi 4.4+. We decided to maintain integrations for both Strapi versions to make sure that you still be able to use our custom field before migrating to Strapi 5. Below, you can find the compatibility table that shows which plugin version should be used with your Strapi version.

The plugin "CKEditor 5 - Official Integration for Strapi" is licensed under MIT. Please note thatCKEditor 5 itself is licensed under GPL v2+ or acommercial license.