CKEditorError: 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 重复模块错误。任何人都可以帮助我。提前致谢。

Answer 1

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

我希望它对你有帮助。

Answer 2

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

Answer 3

当我尝试单独添加 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 中的构建文件夹中复制该文件）

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

就是这样 ：）

Answer 4

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

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

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