Rich text editor custom field (CKEditor 5)

This package provides a custom field for Strapi that lets us use and configure CKEditor. This is forked from the official plugin, provided by the CKEditor team. It has been edited to support only paragraphs, headings, links, and lists. It has also been re-designed a bit to match the Strapi feeling.

🏖️ Features

• Predefined editor preset: no configuration needed to support the paragraphs, headings, links, and lists.
• Output selection: supports both markdown and HTML outputs.
• Custom max length validation: length validation with visual indicators, based on the number of characters in the text.
• Dark mode support: because you like it.

🔧 Installation

To install this plugin simply run this command in the Strapi project:

yarn add @jonssonworkwear/strapi-plugin-ckeditor-custom

Content-type builder

The plugin is made to be used instead of Strapi's default Rich text field.

When adding a new field to a content type, select CUSTOM (instead of DEAFULT), then select Rich text editor.

Inside a content-type, we can use the following schema:

"body": {
  "type": "customField",
  "options": {
    "preset": "jonsson",
    "output": "Markdown"
  },
  "customField": "plugin::ckeditor.CKEditor"
}

✨ Usage

Start writing rich text content inside the custom editor. You will be able to use only the following formatting options:

• Paragraphs
• Headings – h2, h3, h4
• Lists – unordered, ordered
• Links

The plugin will export the content in Markdown format.

🪛 Development

Clone this repository in the Strapi directory.

git clone https://github.com/JonssonWorkwear/strapi-plugin-ckeditor-custom.git --branch jonsson-theme src/plugins/strapi-plugin-ckeditor-custom

Add the plugin to the yarn workspace, inside ./package.json file, so we won't need to use yarn inside plugin itself.

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

Install dependencies.

yarn

Register the plugin so Strapi can use it. Inside ./config/plugins.js file add an entry:

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

Rebuild the project and start the server.

yarn build
yarn develop

Or perhaps use the --watch-admin flag to toggle hot reloading of the admin panel.

yarn develop --watch-admin

Make changes.

Release changes

All the changes are commited and pushed to this repository (or its forks), independently from the Strapi directory. The changes on the release branch will be published in the @jonssonworkwear/strapi-plugin-ckeditor-custom package. If there is a new release published, plugins inside the Strapi project might need their version bumped.