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

Posted 2023-02-16

【中文标题】CKEditorError: ckeditor-duplicated-modules: 某些 CKEditor 5 模块重复

【英文标题】：CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

【发布时间】：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 重复模块错误。任何人都可以帮助我。 提前致谢。

【问题讨论】：

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

【参考方案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