Создать собственный плагин на ckeditor для угловых приложений

Question

Мне нужно создать собственный плагин для ckeditor, чтобы позволить пользователям создавать HTML-элемент cutom.

Мне удалось создать этот плагин для небольшого проекта, включая мой код в элементе script, как в примерах ckeditor (после этого: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html). Все в порядке.

Но моя проблема - включить плагин в мое приложение Angular. Я не понимаю, как его импортировать.

Я пробовал много разных способов импортировать встроенный файл ckeditor.js, сгенерированный webpack, но так и не сработал ...

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

Спасибо, если у кого-то есть идея, чтобы решить это ??

Answer 1

Я узнал, как это сделать.

1. клон ckeditor5-build-classic

   git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
   cd ckeditor5-build-classic
   

2. установить зависимости и любые другие плагины, которые вы можете захотеть добавить (например, выравнивание)

   npm i npm install --save-dev @ckeditor/ckeditor5-alignment

3. обновление src/ckeditor.js с добавленными подключаемыми модулями

   import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

   // Plugins to include in the build.
   ClassicEditor.builtinPlugins = [
       ...
       Alignment                                                            
   ]; 
   

4. запустите npm run build, чтобы упаковать новую сборку

5. скопируйте файл build/ckeditor.js в папку ресурсов в вашем угловом приложении

6. Это способ импорта файла (путь может отличаться в зависимости от настроек):

   import * as CustomEditor from '@app/../assets/ckeditor.js';

Наконец, в вашем компоненте просто объявите редактор следующим образом:

public Editor = CustomEditor;