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 или просто отдельно все работает... Или я что-то делаю не правильно?


Ответы (0 шт):