[CKEditor.Reactive] CKEditorReactive HTMLViewer Style Sheet overrides default OutSystemsUI font family
Reactive icon
Forge component by Fábio Fantato
Application Type

I found a strange issue when I noticed that two of our pages looked different, even though they were built from identical layouts and had identical implementations.  

The difference turned out to be that one page featured CKEditor and one did not.  The CKEditor CSS for body overrides the OutSystems default styling for html.  I feel that the default OutSystemsUI fonts are cleaner and more modern looking.

In general, a utility with specifically targeted functionality such as CKEditor should control styling for only those elements that it is operating on.  It should not have influence beyond the elements it is specifically managing.

In a future version, it would be nice if the CKEditor styles were updated to only apply to the necessary CKEditor elements.

(For example, change the definition for body to body .cke_contents_ltr)

Yes, I just had the same problem. The body of the HTMLviewer of the CKEditor is interfering the body of my parent page:

body{    /* Font */    /* Emoji fonts are added to visualise them nicely in Internet Explorer. */    font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";    font-size: 12px;    /* Text color */    color: #333;    /* Remove the background color to make it transparent. */    background-color: #fff;    margin: 20px;}

Do you already found a solution?

Hi @Luuk van Laarhoven,

I changed the CKEditor component directly.  A very minor change to the HTMLViewer style sheet seems to have fixed my issue.

Hope this helps!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.