在 Angular App 中使用 CKEditor5 自定義構建

Question

我正在構建一種文章編輯器，為此我使用了 CKEditor5 的Angular Integration ； 按照文檔，我可以正確使用帶有ckeditor組件的ClassicEditor構建。

這些是我的文件：

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 （如果我理解正確的話），所以我繼續使用他們的在線構建器創建一個包含所有功能的構建插件已經包含在內，但在那之后我不知道如何繼續，文檔也不是很清楚。

據我了解，我需要在我的 Angular App 中添加build文件夾，然后在我的組件中導入ckeditor.js文件，如下所示：

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

並更改 Editor 的聲明以使用該導入而不是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組件中的自定義構建，但我在其他模塊上還有其他組件，這些組件正在導入和使用我通過 NPM 安裝的ClassicEditor構建，這看起來像是導致錯誤.

修復不是刪除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上有一個 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 = 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] }"