覆盖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>