# v4 code migration: Updating WYSIWYG customizations
This guide is part of the v4 code migration guide designed to help you migrate the code of a Strapi application from v3.6.x to v4.0.x.
🤓 v3/v4 comparison
In Strapi v3, the WYSIWYG is customised by overriding the original component and replacing the file.
In Strapi v4, file replacement is no longer supported. To customize the default WYSIWYG, the new addFields()
method should be used with the extensions system.
To migrate WYSIWYG customizations to Strapi v4:
Create the
./src/admin/extensions
folder.In
./src/admin/extensions
, create a newcomponents
subfolder.In
./src/admin/extensions/components
, create a new component file (e.g.MyNewWysiwyg.js
) and add your logic here. This file will be used to replace the default WYSIWYG editor.Rename the
./src/admin/app.example.js
file from Strapi v3 to./src/admin/app.js
.Update
./src/admin/app.js
with the following modifications:- Import the new WYSIWYG component created at step 3.
- Inject the new WYSIWYG component by using the
addFields()
method inside thebootstrap
lifecycle of the application.addFields()
accepts an object with 2 properties: settype
to'wysiwyg'
andComponent
to the name of the imported WYSIWYG component.
// path: ./src/admin/app.js import MyNewWysiwyg from './extensions/components/MyNewWysiwyg' export default { bootstrap(app) { app.addFields({ type: 'wysiwyg', Component: MyNewWysiwyg }); }, };
💡 Customization tip
The WYSIWYG can also be replaced by creating a plugin that adds new fields (see step-by-step guide using CKEditor).
← GraphQL Translations →