覆盖CKEditor 5内容编辑CSS

我在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中则不是这样-似乎我可能必须做一个自定义构建,希望避免这种情况。

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

预先感谢:)

zgw_cq5948 回答:覆盖CKEditor 5内容编辑CSS

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

中粘贴样式 ,

您应该使用: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>

本文链接:https://www.f2er.com/2964651.html

大家都在问