CK-editor, autoset styles in dropdown with custom.css - ckeditor

Question

I'm having trouble with CK4 and getting the styles for headers reflected in the styles-dropdown.
The .css should be shared of both back- and frontend and uses #page as css-id
Is there any way to tell the dropdown to parse headers with the #page-prefix.
I'm using
CKEDITOR.config.bodyId = 'page';
and css
.cke_editable {
}
#page {
/* works - editor area goes black..
font-family:Arial;
margin:10px;
font-family:Arial;
background-color:#000;
font-size: 10px;
color:#fff;
}
#page h1 {
/* works in editor-area, but not dropdown */
font-family: Verdana;
color:#999;
}
.cke_editable h2 {
/* same as h1.. */
font-family:Arial;
color:#f00;
font-size:16px;
background-color:#999;
}
h3 {
/* work BOTH in editor and style shows in dropdown. */
color:#0f0;
}

Answer 1

I guess that you're about to use stylesheetparser plugin to parse additional selectors. This issue has already been answered here: CKEditor - Stylesheet Parser - Valid Selectors
It's not straightforward but I believe you'll manage to do this. Good luck!

Answer 2

The problem is that CKEditor doesn't apply the bodyId and/or bodyClass to the styles combo: http://dev.ckeditor.com/ticket/7452
As you can see that bug was reported almost two years ago and it has been without activity from the developers most of that time.

Answer 3

I achived a working solution by parsing the css e.g.
#page h1 {...}
when attaching to CK like:
['config']['css'] = 'parseMyCss.php?theFile=style.css
and in parseMyCss (simplified):
$s = file_get_contents($theFile);
$s = str_replace('#page ','', $s);
header('content-type:text/css');
echo $s;