CKEditor错误：ckeditor-duplicated-modules：一些CKEditor 5模块重复。

Question

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

遇到 ckeditor 5 重复模块错误，有人能帮忙吗？谢谢。

- Mr. Chhatrola

---

你有找到解决方案吗？我也遇到了同样的问题。 - Tushar

Answer 1

这是因为你正在使用构建版本导入插件！ 为了添加插件，你需要进行个人构建。请阅读这个页面了解更多信息：CKEditor官方文档。 他们甚至有一个官方的在线构建工具可以为你完成所有的工作：CKEditor在线构建器。 一旦你创建好了个人构建，你需要像第2行之前所做的那样导入编辑器，但是不要写"@ckeditor/ckeditor5-build-classic"，而是写上"你个人构建的文件夹地址"。

希望对你有帮助。

- Aime Aine

---

当我导航到我的本地路径时，我会收到“imagecaption.js中找不到模块的错误”以及许多其他错误。 - paruvelly Vishwanath

Answer 2

我在尝试单独添加CKEditor和插件时遇到了问题。最简单的方法是访问 CKEditor在线构建器 并选择所需的插件和工具栏项目，然后经过五个步骤生成需要使用的代码。

然后您可以在构建文件夹中使用名为ckeditor.js的文件，这几乎就是所有您需要的了。

1- 添加CKEditorModule

@NgModule({
  imports: [CKEditorModule],
...
}

2- 将CKEditor标签添加到您的模板中

<ckeditor
   [editor]="Editor"
   [(ngModel)]="notification.body"
   (ready)="onReady($event)"
   [config]="config"
></ckeditor>

3- 将自定义的CKEditor js文件导入您的组件中（您需要从下载的自定义CKEditor构建文件夹中复制）

import * as customEditor from './ckeditor';

4- 在你的组件中创建一个属性

 public Editor = customEditor;

5- 添加你的配置

 ngOnInit() {
   
    this.config = {
      toolbar: {
        items: [
          'heading',
          '|',
          'fontSize',
          'fontFamily',
          '|',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'highlight',
          '|',
          'alignment',
          '|',
          'numberedList',
          'bulletedList',
          '|',
          'indent',
          'outdent',
          '|',
          'todoList',
          'link',
          'blockQuote',
          'imageUpload',
          'insertTable',
          '|',
          'undo',
          'redo'
        ]
      },
      language: 'en',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells'
        ]
      },
      licenseKey: '',
      wordCount: {
        onUpdate: stats => {
          this.charactersLength = stats.characters
        }
      }
    }
  }

就是这样 :)

- Mohammad Jamal Dashtaki

---

有人在Vue中使用吗？我得到了错误消息：“Invalid prop: type check failed for prop "editor". Expected Function, got Module”。 - Wakanina

Answer 3

我曾经遇到过类似的问题。当我安装了同一版本的所有模块后，问题得以解决。

- gorevanova

---

啊，我真傻！我安装了一个比其他插件更新的插件。谢谢。 - bakis

这是正确的答案，请标记为正确。 - Technolo Jesus

这是正确的答案。 - mostafaznv

Answer 4

注意：我们不再使用@ckeditor/ckeditor5-build-classic！

错误的写法: import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

正确的写法: import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

- Ehsan.Fahami

---

安装完毕后，使用“npm install --save @ckeditor/ckeditor5-build-classic”命令，我在ckeditor5-build-classic文件夹下找不到任何src文件夹。我将从GitHub上下载并尝试它。 - AntiqTech

Answer 5

我在尝试在不同页面上使用编辑器时遇到了这个问题几次。 尝试了以上所述的所有方法，但都没有帮助。 为了解决这个问题，我使用了React懒加载来导入编辑器。

- Viktoriia Lysenko

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 6

For vue2: Use the code below from online builder and it works fine after this isse. Hope this helps someone. 

<ckeditor :editor="editor" v-model="editorForm.editor_content" :config="editorConfig"
    :height="120" :rows="6" @input="onEditorInput" @ready="onReady">
    <p>The initial editor data.</p>
</ckeditor>    

Import custom build file ckeditor.js from node_modules: 
        import CkEditorBuild from 'ckeditor5-custom-build/build/ckeditor';

Import ckeditor: 
        import CKEditor from '@ckeditor/ckeditor5-vue2';

variable: 
           

 editorForm: {
                editor_content: "",
            },
            editor: CkEditorBuild,
            editorConfig: {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'htmlEmbed',
                        // 'pageBreak',
                        'fontSize',
                        'fontFamily',
                        'fontColor',
                        'fontBackgroundColor',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        '|',
                        'alignment',
                        '|',
                        'numberedList',
                        'bulletedList',
                        '|',
                        'indent',
                        'outdent',
                        '|',
                        'link',
                        'blockQuote',
                        'imageUpload',
                        'insertTable',
                        'mediaEmbed',
                        '|',
                        'undo',
                        'redo',
                    ]
                }, language: 'cs',
                image: {
                    toolbar: [
                        'imageTextAlternative',

                        'imageStyle:center',
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn',
                        'tableRow',
                        'mergeTableCells'
                    ]
                },
            },

- Tech Leadz

---

您的答案可以通过添加更多支持信息来改进。请[编辑]以添加进一步详细信息，例如引用或文档，以便他人可以确认您的答案的正确性。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community