ckeditor - 如何为只读显示设置 CKEditor 内容的样式

Question

我在我的应用程序中使用 CKEditor 5，供用户输入包含图像、媒体、表格和样式文本的文档。用户存储文档后，我会再次将其拉出进行显示。过去当我只有最通用的样式时，我会这样显示内容:

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

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

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

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

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

Answer 1

我想说，仅通过使用带有 innerHTML 的 div 作为查看器，让所有 ckeditor 功能在 Angular 中工作是不可行的……我使用了相同的方法，但没有显示一些“数字”，具体嵌入视频...

为了拥有一个禁用的纯只读查看器，我创建了一个专用的包装器组件，并使用了一些全局 CSS 样式来摆脱这种情况下不需要的 UI 行为。

这是我的富文本查看器组件 HTML，它是一个带有空工具栏的 ckeditor，确实与问题相同:

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

以下是一些隐藏图形悬停和表格处理程序边框的全局样式:

// 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)

希望对你有帮助。