Cannot install HtmlEmbed plugin in react CKEDItor

Question

how can I install HtmlEmbed in react CKEitor. I install that package but have an error - version.js:144 Uncaught CKEditorError: ckeditor-duplicated-modules Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules.

My code:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';


function BaseEditor({ data = '', id = 'editor1', setMyEditor }) {

   return (
      <CKEditor
         editor={ClassicEditor}
         config={{
            plugins: [ HtmlEmbed ],
            toolbar: ["htmlEmbed" , "undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading",  "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"],
            heading: {
               options: [
                  { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                  { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                  { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                  { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                  { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                  { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                  { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
               ]
            }
         }}

         data={data}
         id={id}
         onReady={editor => {
            setMyEditor(editor);
         }}
      />
   )
}

export default BaseEditor;

Answer 1

see: CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

This error occurs when you have a build and you try to add modules externally. The editor can't add them to the build after it was already builded and use them, it has to be integrated within the build itself.

If it was a plugin which was not available directly with the ckeditor5 (custom plugins), you would need to clone the ckeditor5 repo and make a custom build (see : Building the editor from source). Luckily though, this plugin is from ckeditor5, and available in the online builder (Online Builder), so you can choose on the site the plugins you want, the Html-Embed plugin is one of them. Then you can download the archive and use it in your project.

You can download a ready to go custumized build https://ckeditor.com/ckeditor-5/online-builder/