CKEditor5 react is a modern JavaScript-rich text editor with a modular architecture. It is one of the most used free WYSIWYG rich text editors used because of it is clear UI and customization features.

Generate Plugin

            Path – my-app

npm run strapi generate:plugin wysiwyg

Install CKEditor dependencies

Path –  ./plugin/wysiwyg

npm i @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Implementing CKEditor

Path  – ./plugins/wysiwyg/admin/src/components/CKEditor/index.js

Note – You have to create the folder manually in the src

          Ex –  /components/CKEditor/index.js

 

Add this code in index.js file

————————————

import React from 'react';

import PropTypes from 'prop-types';

import { CKEditor } from '@ckeditor/ckeditor5-react';

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import styled from 'styled-components';

const Wrapper = styled.div`

  .ck-editor__main {

    min-height: 200px;

    > div {

      min-height: 200px;

    }

  }

`;




const configuration = {

  toolbar: [

    'heading',

    '|',

    'bold',

    'italic',

    'link',

    'bulletedList',

    'numberedList',

    '|',

    'indent',

    'outdent',

    '|',

    'blockQuote',

    'insertTable',

    'mediaEmbed',

    'undo',

    'redo',

  ],

};

const Editor = ({ onChange, name, value }) => {

  return (

    <Wrapper>

      <CKEditor

        editor={ClassicEditor}

        config={configuration}

        data={value}

        onReady={editor => editor.setData(value)}

        onChange={(event, editor) => {

          const data = editor.getData();

          onChange({ target: { name, value: data } });

        }}

      />

    </Wrapper>

  );

};

Editor.propTypes = {

  onChange: PropTypes.func.isRequired,

  name: PropTypes.string.isRequired,

  value: PropTypes.string,

};

export default Editor;

the main component should be null and remove the menu key object.

Path – ./plugins/wysiwyg/admin/src/index.js

Replace this code

mainComponent : null,

Remove this code

// menu: {

    //   pluginsSectionLinks: [

    //     {

    //       destination: `/plugins/${pluginId}`,

    //       icon,

    //       label: {

    //         id: `${pluginId}.plugin.name`,

    //         defaultMessage: name,

    //       },

    //       name,

    //       permissions: [

    //         // Uncomment to set the permissions of the plugin here

    //         // {

    //         //   action: '', // the action name should be plugins::p                lugin-name.actionType

    //         //   subject: null,

    //         // },

    //       ],

    //     },

    //   ],

    // },

Add registerField method before return

Path – ./plugins/wysiwyg/admin/src/index.js

Import CKEditor

import CKEditor from "../src/components/CKEditor/index";

Add this code

strapi.registerField({type:"wysiwyg", Component : CKEditor});

Run command after changes done

1. npm run build
2. npm run develop

Result