The admin panel development has been released!

Since we released the repeatable fields, we have been on the go: a lot of technical debt has been removed, new features are released and one of the latest ones is the administration panel development!

The main goal of this simple improvement is to allow users to customize the administration panel so it can reflect their needs.

Previously, only the files from the "main" package strapi-admin could be modified. Users had to rebuild their front-end to see their enhancements in effect.

Today, I am going to introduce this new feature by answering a question that I am very often asked on the community Slack:

How do we change the current WYSIWYG?

Before digging into the code, let me explain how the feature works: any file added in either my-app/admin or my-app/extensions/<plugin>/admin is copied and replaced into the .cache folder which is the entry point of the webpack-dev-server.

With this in mind, we can easily replace the current WYSIWYG with your favorite one!

Let's get started! For the sake of the example, we are going to replace draftjs by CKEditor.

Project Setup

First, let's create a new project with the latest release:

# Using yarn
yarn create strapi-app my-app --quickstart --no-run  
# Using npx
npx create-strapi-app my-app --quickstart --no-run  

Once the installation is completed we just need to install some packages needed for CKEditor to works.

CKEditor Setup

According to the documentation, we need to install the following dependencies:

# Go to the app folder
cd my-app  
# Using yarn 
yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic  
# Using npm
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic  

While the dependencies installation finishes you need to start your application with the front-end watch-admin mode activated:

cd my-app  
strapi develop --watch-admin  

This command will create the .cache folder where all the admin files are copied. It will also start both the back-end and the front-end servers.

If you look at the structure of this folder, you will see that the component that we need to modify is located in .cache/plugins/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/index.js.

So let's mirror this path in your application and override this specific component.

1. Create the content-manager folder and subfolders in the extensions one.

cd my-app/extensions  
# Create the content-manager folder
mkdir content-manager  
cd content-manager  
# Create both the admin and the src ones
mkdir -p admin/src  
cd admin/src  
# Create the components and the WysiwygWithErrors
mkdir -p components/WysiwygWithErrors  

2. Override the WysiwygWithErrors component

The first step to overriding a file in the administration panel is to first copy the content of the original one from the .cache, pasting it in the override one and start playing with it.
Here we will just clean up the file a little bit and start importing the new editor.

Path: my-app/extensions/content-manager/admin/src/components/WysiwygWithErrors/index.js

Now that is done, we just need to create the CKEditor component.

3. Create the CKEditor component

# Create the component's folder
cd my-app/extensions/content-manager/admin/src/components && mkdir CKEditor  
# Create the index.js
touch CKEditor/index.js  

The basic implementation of this editor is the following:

Voilà! If you go to http://localhost:8000/admin and try to create an entry that has a Rich Text field you will now see the CKEditor instead of draft.

4. Don't forget to rebuild your app with your modifications.

cd my-app  
strapi build  

News in your inbox

Did you enjoy this article? Subscribe to get the latest posts and the most important updates!