CKEditorError: ckeditor-duplicated-modules: 某些 CKEditor 5 模块重复答案

【问题标题】：CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicatedCKEditorError: ckeditor-duplicated-modules: 某些 CKEditor 5 模块重复
【发布时间】：2020-06-25 06:26:18
【问题描述】：

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

获取 ckeditor 5 重复模块错误。任何人都可以帮助我。提前致谢。

【问题讨论】：

你有什么解决办法吗？我也遇到了同样的问题。

标签： reactjs ckeditor ckeditor5

【解决方案1】：

这是因为您正在使用构建导入插件！为了添加插件，您必须进行个人构建。请阅读此页面以了解更多信息：ckeditor offical documentation。他们甚至有一个官方的在线构建器可以为您完成所有工作！：ckeditor online builder 创建它后，您必须像之前在第 2 行所做的那样导入编辑器，但不是从“@ckeditor/ckeditor5-build-classic”写入，而是必须从“您的个人构建的构建文件夹的地址”写入”。

希望对你有帮助。

【讨论】：

当我导航到我的本地路径时，我收到“在 imagecaption.js 中找不到模块错误”和很多类似的错误

【解决方案2】：

我在尝试分别添加 CKEditor 和插件时遇到了这个问题。最简单的方法是转到CKEditor Online Builder 并选择您需要的插件和工具栏项目，然后在五个步骤后生成您需要使用的代码。

然后你可以使用 build 文件夹中名为 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 的 build 文件夹中复制该文件）

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
        }
      }
    }
  }

就是这样:)

【讨论】：

有人在 Vue 中使用吗？我收到错误无效的道具：道具“编辑器”的类型检查失败。预期功能，得到模块

【解决方案3】：

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

错误： import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

正确： import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

【讨论】：

使用“npm install --save @ckeditor/ckeditor5-build-classic”安装后，我在ckeditor5-build-classic下看不到任何src文件夹。我去github下载试试看。

【解决方案4】：

我遇到了类似的问题。当我安装一个版本的所有模块时解决了它

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击进行提问。要在此问题有新答案时收到通知，您可以follow this question。您也可以add a bounty 引起更多关注这个问题。 - From Review