Change the default WYSIWYG editor

To change the default WYSIWYG editor provided with Strapi's admin panel, several options are at your disposal:

• You can install a third-party plugin, such as one for CKEditor, by visiting Strapi's Marketplace.
• You can create your own plugin to create and register a fully custom WYSIWYG field (see custom fields documentation).
• You can take advantage of Strapi's admin panel extensions system and leverage the bootstrap lifecycle function of the admin panel.

If you choose to use the extensions system, create your WYSIWYG component in the /src/admin/extensions folder and import it in the admin panel's /src/admin/app.[tsx|js] entry point file, then declare the new field with the app.addFields() function as follows:

JavaScript

/src/admin/app.js

// The following file contains the logic for your new WYSIWYG editor👇
import MyNewWYSIGWYG from "./extensions/components/MyNewWYSIGWYG";

export default {
  bootstrap(app) {
    app.addFields({ type: "wysiwyg", Component: MyNewWYSIGWYG });
  },
};

TypeScript

/src/admin/app.tsx

// The following file contains the logic for your new WYSIWYG editor👇
import MyNewWYSIGWYG from "./extensions/components/MyNewWYSIGWYG";

export default {
  bootstrap(app) {
    app.addFields({ type: "wysiwyg", Component: MyNewWYSIGWYG });
  },
};