Angular 18 - CKEditor implementation with ssr

Im trying to implement CKEditor wtih angular 18 SSR.

import { afterNextRender, Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-editor',
standalone: true,
imports: [CommonModule, CKEditorModule],
templateUrl: './editor.component.html',
styleUrl: './editor.component.css',
})
export class EditorComponent {
editor: any = null;
config: any;

constructor() {
afterNextRender(() => {
this.loadCkEditor();
});
}

async loadCkEditor() {
const { Bold, Essentials, Italic, Mention, Paragraph, Undo } = await import(
'ckeditor5'
);
this.config = {
toolbar: ['undo', 'redo', '|', 'bold', 'italic'],
plugins: [Bold, Essentials, Italic, Mention, Paragraph, Undo],
};
this.editor = (await import('ckeditor5')).ClassicEditor.create(
document.querySelector('#editor') as any,
this.config,
);
}
}
<div id="editor"></div>


Seems like component is working but css is not loaded. Not sure how to fix it or if there is better way to load this component. Or maybe even use different rich text editor that would be simpler to implement wth Angular ssr. Please help, thanks

Continue reading...