Angular 10 подключить Ckeditor 5,Comments
Хочу подключить ckeditor с комментариями. Мой порядок действий: По инструкции скачиваю в ангуляр ckeditor
npm install --save @ckeditor/ckeditor5-angular
Далее с помощью онлайн сборки
https://ckeditor.com/ckeditor-5/online-builder/
Создаю свою сборку Decoupled document с включенным в нее плагином Comments
Скачиваю сборку и кидаю в проект скачанную папку.
В сборке имеется папка sample а в ней index.html где мы можем увидеть результат сборки

Далее по документации https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html я в app.module.ts подключаю ckeditor. Вот код моего app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
CKEditorModule,
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Далее я в app.component.ts импортирую ckeditor.js из скачанного сборника, подключаю компонент и прописываю конфиги. Вот код компонента
import { Component } from '@angular/core';
import * as Editor from '../../ckeditor5/build/ckeditor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public Editor = Editor;
editorConfig = {
toolbar: {
items: [
'heading',
'|',
'fontSize',
'fontFamily',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'removeFormat',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'indent',
'outdent',
'|',
'todoList',
'link',
'blockQuote',
'imageUpload',
'insertTable',
'mediaEmbed',
'CKFinder',
'|',
'undo',
'redo',
'comment',
'exportWord',
'exportPdf',
'trackChanges'
]
},
language: 'ru',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: 'Мой лицензионный ключ для Comments',
sidebar: {
container: document.querySelector( '.sidebar' )
},
};
public onReady( editor ) {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
}
}
И в app.component.html я прописываю данную строку:
<ckeditor [config]="editorConfig" [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>
А в app.component.css я вставляю стили из sample/style.css
В итоге я получаю данную картину, editor не выглядит как документ(скорей всего стили не работают). А при попытке оставить комментарии к тексту toolbar дублируется и выходит следующая ошибка:

Uncaught TypeError: Cannot read property 'name' of null
at new h (ckeditor.js:13250)
at new c (ckeditor.js:14375)
at l._createCommentThreadInputView (ckeditor.js:26128)
at new s (ckeditor.js:26119)
at new l (ckeditor.js:26144)
at m._createCommentThreadView (ckeditor.js:7602)
at m._attachCommentThread (ckeditor.js:7592)
at CommentThread.attachTo (ckeditor.js:7735)
at m._addCommentThread (ckeditor.js:7586)
at m.<anonymous> (ckeditor.js:7487)
Возможно надо подключить юзеров как в документации
https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/track-changes/track-changes-integration.html
Но не знаю куда это прописывать для Angular
При подключении в обычный проект на Yii или просто отдельно все работает...
Или я что-то делаю не правильно?