无法在react CKEDItor中安装HtmlEmbed插件

Question

如何在react CKEitor中安装HtmlEmbed。我安装了那个软件包但是有一个错误-版本.js:144未捕获的ckeditor错误：ckeditor重复的模块阅读更多：https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor复制了模块。

我的代码：

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

请参阅：ckeditor错误：ckeditor重复模块：一些ckeditor 5模块重复

当您有一个生成并且尝试从外部添加模块时，就会发生此错误。编辑器不能在构建后将它们添加到构建中并使用它们，它必须集成在构建本身中。

如果它是一个不能直接与ckeditor5(自定义插件(一起使用的插件，则需要克隆ckeditor5repo并进行自定义构建(请参阅：从源代码构建编辑器(。幸运的是，这个插件来自ckeditor5，可以在在线生成器(online builder(中使用，所以你可以在网站上选择你想要的插件，Html嵌入插件就是其中之一。然后，您可以下载存档并在您的项目中使用它。

您可以下载现成的定制版本https://ckeditor.com/ckeditor-5/online-builder/