How can I add the 'Source Editing' feature to CKEditor?

[Forzali]

Hello, I'm encountering a 'duplicate-modules' error while trying to add the 'Source Editing' plugin to the CKEditor component. I've struggled to resolve this issue, but couldn't find informative resources online. Can you assist me in resolving this error and guide me on how to properly use the 'Source Editing' feature?

[Witoso]

Hi! Could you share a bit more info how you're adding a plugin and to which build? It's possible that you're trying to extend a predefined build, which is not possible, and a custom build needs to be prepared. We are working on new installation methods which should resolve this issue once and for all: ckeditor/ckeditor5#15502

[Forzali]

Hello, I would like to explain step by step how I am trying to add the "Source Editing" feature to my React project. Here's a detailed breakdown:

1. Imported the packages in my code:

import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import { CKEditor } from "@ckeditor/ckeditor5-react"; import { SourceEditing } from "@ckeditor/ckeditor5-source-editing";

2. Attempted to use the CKEditor component with Source Editing:

<CKEditor
  editor={ClassicEditor}
  data={""}
  config={{ plugins: [SourceEditing] }}
/>

Issue I encountered the "ckeditor-duplicated-modules" error, and I'm having difficulty resolving it. I'm seeking assistance to understand where I might be going wrong and how to fix this issue.

Thank you for your help!

[Witoso]

So as I thought, you're adding a plugin to a predefined build which is not possible. A custom build needs to be created..

[Forzali]

Thank you so much for your assistance! I found a helpful example from the provided source, and it worked for my case. Additionally, I'd like to mention that the example project source code provided in the A custom build needs to be created resource doesn't work without upgrading the version. Thanks again, have a great day!