How to style CKEditor content for read-only display - ckeditor

Question

I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?

Answer 1

I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.