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行为。

这是我的RTF查看器组件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)

我希望这会有所帮助。

如何设置CKEditor内容的样式以进行只读显示

1 个答案: