在 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 如果我理解正确，所以我继续使用他们的 online builder 创建一个包含所有插件的构建，但在那之后我不确定如何继续并且文档不是很清楚。

据我了解，我需要在我的 Angular 应用程序中添加 build 文件夹，然后在我的组件中导入 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 应用程序中成功进行自定义构建吗？

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';

但我应该只在整个应用程序中使用其中一个，所以如果我在 Component1 和 Component2 上有一个编辑器，我可以导入两个构建，但在编辑器的声明中属性我应该只使用一个，并且应用程序使用的每个组件都应该是相同的，所以：

这个有效

组件 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;

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

Answer 2

     console.log(this.ckEditorClassic.builtinPlugins.map( plugin => plugin.pluginName ));
  }

This will give you the list of plugins in the custom build. 
My sample has :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]


take the displayed list within [] and replace xxxx with it.

<ckeditor [config]="{toolbar:[xxxx] }"

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

Using CKEditor5 Custom Build in Angular App

javascript

ckeditor

typescript

angular