0

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;
Ali
  • 57
  • 1
  • 6

1 Answers1

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/

kinda_sus
  • 56
  • 4
  • I use ckeditor online builder, maybe you know why it's not working with vue 3, editor not appear at all. I follow this instruction -https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html#integrating-a-build-from-the-online-builder – Ali Sep 11 '22 at 05:43
  • I forgot also install @ckeditor/ckeditor5-vue, and import it in main.js, after that everything work fine – Ali Sep 11 '22 at 06:05