CKEditor issue: How to apply custom css to CKEditor [closed]

Question

I want to have all styles applied to my CKEditor content. So main idea is to make editor look like actual page.

I've added this to my config.js file

config.contentsCss = '/Home/GetCss';

And I have a server-side action which is getting css file from database and returning it to me.

public ActionResult GetCss()
{
  var settings = GetSettings();
  return File(settings.CssContent, "text/css", settings.CssFileName);
}

After that I can see that my css is included in head(inside ckeditor iframe) of ckeditor, but styles doesn't apply to content.

<link type="text/css" rel="stylesheet" href="/Home/GetCss">

What can cause this issue?

EDIT: (after seeing couple of answers)

Please answer only when you know what can be a real problem... GetCss is returining right css and next css including line is auto-generated with config.contentsCss = '/Home/GetCss'; . So the issue is somewhere in CKEditor settings, not with the server-side function and generated code.

EDIT 2:

After setting css file directly the issue remains the same

config.contentsCss = '/Content/MyCssFile.css';

Still I can see correct css file in iframe's HEAD part, but no afect to body elements.

Answer 1

Did you consider using inline editing instead of the classic version which is using iframes?

The advantage of the inline version is that if, for example, your CSS heavily relies on the hierarchy of elements, it will work definitely better without iframes. Have a look at this code:

<div id="main">
  <div id="content">
    (Here goes the content that is edited inside CKEditor)
  </div>
</div>

and

#main #container h2 {
  font-size:20px;
  color:#07c;
}

The style for the header will most likely not be recognized inside the classic CKEditor, even if you try to use things like config.bodyId, because this way you could fake only one ID: "main" or "container" by adding such ID to the body element.

The inline version will not have this limitation, because the content will not be encapsulated inside the iframe.

One more thing: if the reason why "styles doesn't apply to content" is indeed in the hierarchy of elements inside CSS and you want to use the "old" classic version, you may simply consider providing a dedicated, simplified stylesheet to the editor. Start with the most simple CSS to see if you're on the right path.