Replacing wysiwyg editor with a custom one doesn't work in Strapi 5

[maruthasalamr]

Node Version

v18.20.2

NPM/Yarn/PNPM Version

10.5.0

Strapi Version

5.5.1

Operating System

MacOS

Database

PostgreSQL

Javascript or Typescript

Javascript

Reproduction URL

No response

Bug Description

While replacing the default wysiwyg editor with a custom plugin ckEditor in strapi v5 facing challenges and cannot able see the custom field in content type builder using addFields adding the custom field to replace the existing richtext. When i try to register as a plugin it's working and i can able to add as custom field but i want to replace the existing or default wysiwyg editor. I was using same code in strapi v4 it's working fine.

Steps to Reproduce

1.Update to strapi v4 to v5

Expected Behavior

I need to replace the existing wysiwyg editor with CKEditor5 in strapi version 5

Logs

Code Snippets

plugins/wysiwyg/src/admin/components/index.jsx

Import React, { useState } from 'react';
import { Button, Stack, Flex, Field, FieldLabel, FieldError } from '@strapi/design-system';
import { useLibrary, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import './ck-editor.wse.css';

const Wysiwyg = ({ name, onChange, value, required, error, type }) => {
  const [showMediaLibDialog, setShowMediaLibDialog] = useState(false);
  const { components } = useLibrary();
  const MediaLibDialog = components['media-library'];

  const handleToggleMediaLibDialog = () => {
    setShowMediaLibDialog(!showMediaLibDialog);
  };

  const handleSelectAssets = (files) => {
    const formattedFiles = files.map((file) => ({
      alt: file.alternativeText || file.name,
      url: prefixFileUrlWithBackendUrl(file.url),
      mime: file.mime,
    }));
    const images = formattedFiles.map((image) => `<image src='${image.url}' alt='${image.alt}'>`).join();
    onChange({
      target: {
        name: name,
        value: (value || '') + images,
      },
    });
    handleToggleMediaLibDialog();
  };

  return (
    <div>
      <Field name={name} error={error}>
        <Button variant="secondary" onClick={handleToggleMediaLibDialog}>
          MediaLib
        </Button>
        <Stack size={2} padding={2}>
          <Flex>
            <FieldLabel required={required}>{name}</FieldLabel>
          </Flex>
          <div className={error ? 'error-active' : ''}>
            <CKEditor
              id={name}
              config={{
                toolbar: {
                  removeItems: ['uploadImage', 'outdent', 'indent'],
                  shouldNotGroupWhenFull: false,
                },
                link: {
                  decorators: {
                    isExternal: {
                      mode: 'manual',
                      label: 'Open in a new tab',
                      defaultValue: true,
                      value: true,
                      attributes: {
                        target: '_blank'
                      }
                    },
                    canFollow: {
                      mode: 'manual',
                      label: 'No Follow',
                      defaultValue: true,
                      value: true,
                      attributes: {
                        rel: 'nofollow noreferrer noopener'
                      }
                    }
                  }
                },
                contentsCss: './ck-editor.wse.css',
              }}
              name={name}
              editor={ClassicEditor}
              value={value}
              data={value}
              errors={error}
              onChange={(_, editor) => {
                onChange({ target: { name: name, type: type, value: editor.getData() } });
              }}
            />
          </div>
          <FieldError />
        </Stack>
        {showMediaLibDialog && (
          <MediaLibDialog onClose={handleToggleMediaLibDialog} onSelectAssets={handleSelectAssets} />
        )}
      </Field>
    </div>
  );
};

export default Wysiwyg;

plugins/wysiwyg/src/index.js

import pluginPkg from '../../package.json';
import Wysiwyg from './components/Wysiwyg';
import pluginId from './pluginId';
import Initializer from "./components/Initializer";


const name = pluginPkg.strapi.name;

export default {
  register(app) {
    console.log("app",app)
       app.addFields({ type: 'wysiwyg', Component: Wysiwyg });

    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: true,
      name,
    });
    
       
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  bootstrap() {},
};

config/plugin.js

wysiwyg: {
    enabled: true,
    resolve: './src/plugins/wysiwyg', // path to plugin folder
  },

Media

No response

Additional information

No response

Confirmation Checklist

• I have checked the existing issues for duplicates.
• I agree to follow this project's Code of Conduct.

[Gkleinereva]

I ran into this problem today too

[derrickmehaffy]

PLEASE PLEASE do not overwrite the default editors, we have custom fields for a reason PLEASE use them.

You can see an example in the following packages:

• https://github.com/SKLINET/strapi-plugin-tinymce
• https://github.com/strapi/strapi/tree/develop/packages/plugins/color-picker

Here is the docs for custom fields: https://docs.strapi.io/dev-docs/custom-fields

---

We no longer support overwriting default editors with custom ones, we only support custom fields for this.

[Gkleinereva]

Hey @derrickmehaffy we may want to update https://docs.strapi.io/dev-docs/admin-panel-customization/wysiwyg-editor considering your response above. I would love to submit a PR to update it, but I don't think I understand the history and considerations sufficiently to make appropriate updates.

[derrickmehaffy]

Hey @derrickmehaffy we may want to update https://docs.strapi.io/dev-docs/admin-panel-customization/wysiwyg-editor considering your response above. I would love to submit a PR to update it, but I don't think I understand the history and considerations sufficiently to make appropriate updates.

I'll transfer this issue over to the docs repo to have that final point removed.