未捕获的 CKEditorError: ckeditor-duplicated-modules in angular 11

问题描述

我想在 angular 中使用 Ckeditor 和 Ckfinder thgother。

我用这种方式：

模块：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { browserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,FormsModule,CKEditorModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

这是我的组件：

import { Component,OnInit } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public Editor = ClassicEditor;



  ngOnInit(): void {

    ClassicEditor
      .create(document.querySelector('#editor'),{
        plugins: [CKFinder],// Enable the "Insert image" button in the toolbar.
        toolbar: ['uploadImage' ],ckfinder: {
          // Upload the images to the server using the CKFinder QuickUpload command.
          uploadUrl: 'https://example.com/ckfinder/core/connector/PHP/connector.PHP?command=QuickUpload&type=Images&responseType=json'
        }
      });

  }


}

这是 Html 代码：

<ckeditor [editor]="Editor" [config]="{ toolbar: [ 'heading','ckfinder','|','bold','italic' ] }"
  data="<p>Hello,world!</p>"></ckeditor>

但它显示了这个错误：

未捕获的 CKEditorError: ckeditor-duplicated-modules

有什么问题吗？我如何在 angular 中使用 Ckfinder？

解决方法

您可以使用官方的 CK Editor 5 Angular 组件。

文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

GitHub： https://github.com/ckeditor/ckeditor5-angular

您可以使用带有所有必需插件的 Online Builder tool 创建自定义构建，然后以 angular 导入该构建。

我一直在使用带有自定义插件的自定义构建，没有任何问题。