javascript - 在 Angular 应用程序中使用 CKEditor5 自定义构建

Question

我正在构建一种文章编辑器，为此我使用Angular Integration for CKEditor5；按照文档，我可以正确使用ClassicEditor构建ckeditor。

这些是我的文件：

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

@Component({
  selector: 'app-edit-article',
  templateUrl: './edit-article.component.html',
  styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {

  constructor() { }

  public Editor = ClassicEditor;
  articleForm: FormGroup;

  ngOnInit() {
  }

}

模板

<div class="row">
    <div class="col-12">
         <label for="">Content</label>
         <ckeditor [editor]="Editor" id="editor" class="blue-scroll--light" formControlName="content"></ckeditor>
    </div>
</div>

不幸的是，ClassicEditor指南中引用的构建不包含许多插件，因此我尝试添加其中一些，如文本对齐、字体颜色、字体大小等。

似乎我需要创建一个包含所有所需功能的自定义构建，然后ClassicEditor在我理解正确的情况下引用该构建而不是在我的打字稿文件中，所以我继续使用他们的在线构建器创建一个包含所有插件已经包括在内，但在那之后我不确定如何继续，文档也不是很清楚。

据我了解，我需要build在我的 Angular 应用程序中添加文件夹，然后ckeditor.js在我的组件中导入文件，如下所示：

import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';

并更改编辑器的声明以使用该导入而不是ClassicEditor，因此：

public Editor = Editor;

但是，一旦我进行了更改，我什至无法再运行该应用程序，因为我收到以下错误：

ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

    at Object.<anonymous> (ckeditor.js:5)
    at Object.push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at i (ckeditor.js:5)
    at Module.<anonymous> (ckeditor.js:5)
    at i (ckeditor.js:5)
    at push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at ckeditor.js:5
    at ckeditor.js:5
    at Object../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
    at __webpack_require__ (bootstrap:84)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

同样，文档说这是由于进行了多次导入，但我不明白如何，因为我只使用ckeditor.js我刚刚生成的构建中的文件，如果在纯 HTML 文件中引用它可以正常工作。

有人可以提供一个关于如何在 Angular 应用程序中成功地使自定义构建工作的示例吗？

标签： javascriptangulartypescriptckeditor

Answer 1

过了一会儿，我发现问题似乎是我在我的应用程序的不同模块中导入了另一个构建。

所以我只是EditArticle通过导入和使用该文件在我的组件中使用自定义构建，但我在其他模块上还有其他组件正在导入和使用ClassicEditor我通过 NPM 安装的构建，这看起来像是导致错误。

修复不是删除包ClassicEditor或删除import ClassicEditor语句，而是确保该特定导入没有在应用程序的其他任何地方使用，因为我猜在编译期间 Angular 会删除所有未使用的导入。

完成此操作后，应用程序在我的自定义构建中运行良好。

只是为了清除它，我可以将这两个导入放在同一个文件或多个组件上

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

但我应该只在整个应用程序上使用其中一个，所以如果我有一个 Editor onComponent1和 on Component2，我可以同时导入两个构建，但是在 Editor 属性的声明中我应该只使用一个，它应该是应用程序使用的每个组件都使用相同的组件，因此：

这有效

组件1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

组件2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

这行不通_

组件1

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = Editor;

组件2

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';

public Editor = ClassicEditor;

您当然可以完全从导入中删除未使用的构建，这也可以。再说一遍，确保您在所有应用程序上使用相同的构建