CODEWITHSUNDEEP
javascripthtmlcssckeditor
user1032752
user1032752

Reputation: 881

CKEditor - Editable content CSS interferes with editor toolbar styling

I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.

This can be seen here: https://jsfiddle.net/hqpfjzyr/1/

Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.

This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.

The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.

What am I missing here?

Upvotes: 0

Views: 215

Answers (1)

Kajetan W.Li
Kajetan W.Li

Reputation: 161

This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.

What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.

Upvotes: 1

Related Questions