[BUG] - Compatibility issue with CKEditor5 plugin

[kevinvugts]

Describe the bug When exporting and importing a collection type containing a CKEditor field. This plugin does not account for the media files updates in the value of this fields. And thus resulting in corrupt media upload files and referencing old values.

To Reproduce Steps to reproduce the behavior:

1. Upload an image in a CKEditor field of Strapi.
2. Export the collection type
3. Import the collection type in another Strapi
4. Check the link not representing the correct url

Expected behavior It should check if the file in the CKEditor needs to be uploaded first Secondly it should update the field with the new url of the uploaded fiels And it should import the new collection type

Screenshots

Additional context Not applicable. This issue is clear.

Possible duplicate: #69

[H-Gomez]

@kevinvugts Have you managed to find a solution for this? We are seeing the same issue.

[kevinvugts]

@kevinvugts Have you managed to find a solution for this? We are seeing the same issue.

I can definitely give you some tips. But i am unable to provide you the full code sample. Here is some pseudo code that should get you going.

We leverage the lifecycle methods of Strapi to basically find and replace the referenced media urls inside the content string of CKEditor. The value of the CKEditor is saved as a string which you should parse.

After parsing you should do a few things:

• Parse the string to a DOM using JSDom for example
• Search for "" tags and find and replace the files by importing them again

const { handleCkEditorContent } = require("../../utils/handleCkEditorContent");

module.exports = {
  async beforeUpdate(event) {
    const ctx = strapi.requestContext.get();
    const { user } = ctx.state;
    const { model } = event;
    const { data } = event.params;

    // find all attributes with customField plugin::ckeditor5.CKEditor and handle the content
    const ckEditorAttributes = Object.entries(model.attributes).filter(
      ([key, value]) => value.customField === "plugin::ckeditor5.CKEditor"
    );

    for (const [key, value] of ckEditorAttributes) {
      if (data[key]) {
        data[key] = await handleCkEditorContent(data[key], user);
      }
    }
  },
  async beforeCreate(event) {
    const ctx = strapi.requestContext.get();
    const { user } = ctx.state;
    const { model } = event;
    const { data } = event.params;

    // find all attributes with customField plugin::ckeditor5.CKEditor and handle the content
    const ckEditorAttributes = Object.entries(model.attributes).filter(
      ([key, value]) => value.customField === "plugin::ckeditor5.CKEditor"
    );

    for (const [key, value] of ckEditorAttributes) {
      if (data[key]) {
        data[key] = await handleCkEditorContent(data[key], user);
      }
    }
  },
};

[H-Gomez]

Thank you, very helpful!