October 23, 2019
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/extensions/<plugin>/admin is copied and replaced into the
.cache folder which is the entry point of the
With this in mind, we can easily replace the current WYSIWYG with your favorite one!
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.
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
So let's mirror this path in your application and override this specific component.
1. Create the
content-manager folder and subfolders in the
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.
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
4. Don't forget to rebuild your app with your modifications.
cd my-app strapi build