CODEWITHSUNDEEP
ckeditorckeditor5
jeremyj11
jeremyj11

Reputation: 714

Override CKEditor 5 content edit css

I'm using CKEditor 5 in Angular 7, Classic build.

All working fine except that the p tags in the content edit area have this css applied:

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

Which results in a big vertical margin between paragraphs in the content edit area.

I've been going through the documentation but haven't found a clear answer as to how I can remove or override this css. In previous versions of CKEditor the css file was easily accessible and overridden, but in version 5 not so - it seems I may have to do a custom build, which I'm hoping to avoid.

Before I go down that route - has anyone else come across this? Any other solutions or recommendations?

Thanks in advance :)

Upvotes: 1

Views: 2793

Answers (2)

Nikita
Nikita

Reputation: 308

You should use :host ::ng-deep to override it with css.

Example:

: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>

Upvotes: 2

PHCris
PHCris

Reputation: 38

I'm using CKEditor 4 and I don't know if the source tab is still available in that version. If so, you have to edit ypur ck.config file and add CKEDITOR.config.allowedContent = true. After that, you can now paste a style in the source tab source

Upvotes: 0

Related Questions