More Premium Hugo Themes Premium React Themes

Strapi Plugin Ckeditor

Replace Strapi default WYSIWYG editor with CKEditor 5

Strapi Plugin Ckeditor

Replace Strapi default WYSIWYG editor with CKEditor 5

Author Avatar Theme by idea2app
Github Stars Github Stars: 7
Last Commit Last Commit: Nov 14, 2020 -
First Commit Created: Dec 18, 2023 -
Strapi Plugin Ckeditor screenshot

Overview:

The Strapi CKEditor plugin is a tool used to replace the default WYSIWYG editor in Strapi with CKEditor 5. This plugin allows users to have a more feature-rich and customizable editor for creating and editing content.

Features:

  • Replacement of default editor: The Strapi CKEditor plugin replaces the default WYSIWYG editor in Strapi with CKEditor 5, which provides more advanced features.
  • Increased functionality: CKEditor 5 brings enhanced functionality to Strapi, including support for rich text formatting, embedding media, and advanced image editing.
  • Customization options: The plugin allows users to customize the CKEditor according to their specific requirements, such as adding custom buttons or configuring toolbar options.

Installation:

To install the Strapi CKEditor plugin, follow these steps:

  1. Add the plugin as a dependency in your project’s package.json file:

    npm install strapi-plugin-ckeditor5
    
  2. Register the CKEditor field in the Strapi admin panel by creating a new file ckeditor.js in the extensions/content-manager/admin/src/components/RepeatableComponent directory with the following code:

    import pluginPkg from '../../package.json';
    import pluginId from './pluginId';
    import App from './containers/App';
    
    import Initializer from './containers/Initializer';
    
    export default strapi => {
      const pluginDescription =
        pluginPkg.strapi.description || pluginPkg.description;
    
      strapi.registerPlugin({
        name: pluginPkg.strapi.name,
        description: pluginDescription,
        icon: pluginPkg.strapi.icon,
        id: pluginId,
        pluginLogo: pluginPkg.strapi.icon,
        isRepeatable: true,
        initializer: Initializer,
        pluginPackage: pluginPkg,
        settings: {
          global: {
            endpoints: {
              wallet: '/gateway/api/admin/wallets',
            },
          },
        },
        menu: {
          pluginsSectionLinks: [
            {
              destination: `/plugins/${pluginId}/run`,
              label: {
                id: `${pluginId}.plugin.name`,
                defaultMessage: pluginPkg.strapi.name,
              },
              name: pluginPkg.strapi.name,
              permissions: [
                {
                  action: 'plugins::ckeditor5.read',
                  subject: pluginPkg.name,
                },
              ],
              subLinks: [],
            },
          ],
        },
      });
    };
    
  3. Restart Strapi and the new CKEditor plugin should now be active.

Summary:

The Strapi CKEditor plugin is a powerful add-on for Strapi that replaces the default WYSIWYG editor with CKEditor 5. It offers increased functionality and customization options, allowing users to create and edit content more effectively. By following the installation guide, users can easily integrate the plugin into their Strapi project and leverage the advanced features of CKEditor 5.