Ckeditor 如何为只读显示设置编辑器内容的样式

我在我的应用程序中使用CKEditor 5，用户可以输入带有图像、媒体、表格和样式文本的文档。一旦用户存储了文档，我就再次将其拉出显示。在过去，当我只有最通用的样式时，我会这样显示内容：

<div [innerHTML]="doc.text"></div>   

<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }" 
          [disabled]="true" [data]="doc.text"></ckeditor>

这是一个角度应用程序，解释了上面使用的语法。问题是文本呈现，但有效的CSS使其看起来不同。例如，CKEditor有一个功能，用户可以自动将图像大小调整为50%，并在图像周围流动文本。它在编辑器中看起来非常好，但是当显示为上面的图像时，图像会恢复为全尺寸

我现在的解决方法是在禁用模式下调用一个ckeditor，如下所示：

<div [innerHTML]="doc.text"></div>   

<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }" 
          [disabled]="true" [data]="doc.text"></ckeditor>

---

这是可行的，但我更希望有一个解决方案，不必将ckeditor导入到不需要用户编辑文档的组件中。有人知道如何做到这一点吗？

我想说的是，仅仅使用带有innerHTML的div作为查看器，是不可能让所有ckeditor功能都以Angular方式工作的。。。我用的是同样的方法，但一些“数字”并没有显示，具体嵌入视频

为了拥有一个禁用的纯只读查看器，我创建了一个专用的包装器组件，并使用了一些全局CSS样式来消除这个场景中不需要的UI行为

这是我的富文本查看器组件HTML，它是一个带有空工具栏的编辑器，与问题中的相同：

<ckeditor class="ckeditor-viewer"  *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>

我希望有帮助