覆盖 CKEditor 5 内容编辑 css

Question

我在 Angular 7，经典版本中使用 CKEditor 5。

除了内容编辑区域中的 p 标签应用了此 css 之外，一切正常：

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

这导致内容编辑区域中段落之间的垂直边距很大。

我一直在阅读文档，但没有找到关于如何删除或覆盖此 css 的明确答案。在以前版本的 CKEditor 中，css 文件很容易访问和覆盖，但在版本 5 中并非如此 - 看来我可能必须进行自定义构建，我希望避免这种情况。

在我走那条路之前 - 有没有其他人遇到过这个？还有其他解决方案或建议吗？

提前致谢:)

Answer 1

我正在使用 CKEditor 4，但我不知道 source 选项卡在该版本中是否仍然可用。如果是这样，您必须编辑 ypur ck.config 文件并添加 CKEDITOR.config.allowedContent = true。之后，您现在可以在源选项卡中粘贴样式

Answer 2

您应该使用 :host ::ng-deep 来用 css 覆盖它。

示例：

:host ::ng-deep .text {
    p {
        margin-bottom: 20px;
    }

    h2 {
        margin-top: 40px;
        margin-bottom: 10px;
    }

    h3 {
        margin-top: 25px;
        margin-bottom: 5px;
    }

    h4 {
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

<ckeditor  class="text" [editor]="textEditor" [config]="config"></ckeditor>

覆盖 CKEditor 5 内容编辑 css

Override CKEditor 5 content edit css

ckeditor

ckeditor5