Использование CKEditor5 Custom Build в Angular приложении

Question

Я создаю своего рода редактор статей, для этого я использую Angular Интеграция для 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, упомянутая в этом руководстве, не включает в себя множество плагинов, поэтому я пытаюсь добавить некоторые из них, например выравнивание текста, цвет шрифта, размер шрифта и т. д. c.

Кажется, что мне нужно создать пользовательскую сборку , которая включает в себя все нужные функции, а затем ссылаться на эту сборку вместо 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 file.

Может ли кто-нибудь привести пример успешной работы Custom Build в приложении Angular?

Answer 1

Через некоторое время я обнаружил, что проблема заключается в том, что мне пришлось импортировать другую сборку в другой модуль моего приложения.

Так что я использовал только пользовательскую сборку внутри моего EditArticle компонента, импортировать и использовать этот файл, но у меня также были другие компоненты в других модулях, которые импортировали и использовали сборку ClassicEditor, которую я установил через NPM, которая, похоже, вызвала ошибку.

Исправление я не должен был удалить пакет ClassicEditor и не удалить оператор import ClassicEditor, а просто убедиться, что этот указанный c импорт не использовался нигде в приложении, так как я предполагаю, что во время компиляции Angular удаляет все неиспользуемые импорты.

После того, как я это сделал, приложение работало нормально с моей пользовательской сборкой.

Просто, чтобы очистить его, я могу иметь эти два импорта в одном файле или несколько компонентов

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

Но я должен использовать только один из них во всем приложении, поэтому если у меня есть редактор на Component1 и на Component2, я могу иметь bo Эта сборка импортируется , но при объявлении свойства Editor я должен использовать только один, и он должен быть одинаковым для каждого компонента, используемого приложением, поэтому:

This работает

Компонент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;

Это НЕ БУДЕТ работа

Component1

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

public Editor = Editor;

Component2

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

public Editor = ClassicEditor;

Конечно, вы можете просто удалить неиспользуемую сборку из импорта, и это тоже буду работать Просто еще раз, убедитесь, что вы используете одну и ту же сборку для всех приложений