How to change wsywig editor to CKEditor in v4

System Information
  • Strapi Version: 4
  • Operating System: MacOs
  • Database: Mysql
  • Node Version: v14.17.6
  • NPM Version: 6.14.15
  • Yarn Version: 1.22.11

I followed the ways that worked in v3 not the same as not working with v4 and i couldn’t find relevant documents to do in V4

Once you have generated the plugin you want to use, in my case it is the CKEditor, you have to use the app.addFields() in the index file of your plugin.

in my case:
src/plugins/wysiwyg/admin/src/index.js

import Wysiwyg from './components/Wysiwyg';

export default {
  register(app) {
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: false,
      name,
    });
    app.addFields({type:'wysiwyg',Component: Wysiwyg})  // Here!
  },

  bootstrap(app) {},

  async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map(locale => {
        return import(`./translations/${locale}.json`)
          .then(({ default: data }) => {
            return {
              data: prefixPluginTranslations(data, pluginId),
              locale,
            };
          })
          .catch(() => {
            return {
              data: {},
              locale,
            };
          });
      })
    );

    return Promise.resolve(importedTrads);
  },
};