More Premium Hugo Themes Premium React Themes

Strapi Plugin Ckeditor

Integrates CKEditor 5 into your Strapi project as a fully customizable custom field.

Strapi Plugin Ckeditor

Integrates CKEditor 5 into your Strapi project as a fully customizable custom field.

Author Avatar Theme by nshenderov
Github Stars Github Stars: 125
Last Commit Last Commit: Apr 26, 2025 -
First Commit Created: Dec 18, 2023 -
default image

Overview

The document provides information about a Strapi plugin called CKEditor that integrates a rich text editor into Strapi apps. It mentions the features, installation process, configuration, and requirements of the plugin.

Features

  • Media library integration: The plugin supports integration with the media library in Strapi.
  • Supports responsive images: It provides support for responsive images in the editor.
  • Supports Strapi’s theme switching: The plugin allows users to switch between different themes and even define their own theme.
  • Supports i18n: It supports internationalization for both content and the user interface.
  • Few predefined editor configs: The plugin comes with a few predefined editor configurations, but users can also add their own.
  • Possible to add new plugins: Users can add new plugins to extend the functionality of the CKEditor.

Installation

To install the CKEditor plugin in a Strapi app, follow these steps:

  1. Add the package to your Strapi app:
npm install strapi-plugin-ckeditor

or

yarn add strapi-plugin-ckeditor
  1. Run the build command:
npm run build

or

yarn build

Configuration

The plugin is based on Strapi’s custom fields and requires the CKEditor DLL build. The configuration should be defined in the /config/ckeditor.txt file. It is recommended to explore the official CKEditor documentation for detailed configuration options. The content from ckeditor.txt will be passed into a script tag during the initialization process.

Default configurations can be found in the admin/src/components/Input/CKEditor/configs directory. The default theme can be found in the admin/src/components/Input/CKEditor/theme directory.

To specify a URL for uploaded files when using the default upload provider, add a url property to the config/server.js file.

To display content from an external source on the admin side, configure the middlewares.js file.

To add plugins, follow these steps:

  1. Inside your app, install the desired plugin:
npm install plugin-name

or

yarn add plugin-name
  1. In your app’s config/ckeditor.txt file, add the plugin.
  2. Rebuild your app:
npm run build

or

yarn build

Contributing

If you want to contribute to this package, follow these steps to configure your environment:

  1. Install Strapi infrastructure on top of the plugin repository by creating a plugins folder in your Strapi project.
  2. Clone the plugin repository into the plugins folder.
  3. Add an entry in the ./package.json file of the plugin repository.
  4. Install dependencies:
npm install

or

yarn install
  1. Register the plugin in the ./config/plugins.js file.
  2. Rebuild the project and start the server.

Requirements

  • Strapi v4.4.0+
  • Node >=14.19.1 <=18.x.x

The build of this plugin includes some useful plugins based on the following repositories:

Summary

The document provides an overview of the CKEditor plugin for Strapi, highlighting its features, installation process, configuration options, and requirements. It also includes instructions for contributing to the plugin’s development.