I am probably late to the party, but if anybody else is wondering how to solve this issue, you can set CKeditor to readonly mode. That way the CSS will work properly images will be also rendered properly. Below you will find my implementation in angular 18, using CKeditor 5.
public ReadOnlyEditor = ClassicEditor;
ngAfterViewInit(): void{
this.previewText = "<p>Hello world</p>";
this.readonlyConfig = {
toolbar: {
items: [],
},
plugins: [
...same plugins as in CKeditor you use to create content
],
initialData: this.previewText, //text inside editor
menuBar: {
isVisible: false
},
};
this.isLayoutReady = true;
}
previewReady(editor: any){
editor.enableReadOnlyMode("1"); //set readonly mode
}
<ckeditor *ngIf="isLayoutReady"
[editor]="ReadOnlyEditor"
(ready)="previewReady($event)"
[config]="readonlyConfig"/>