Custom redactor.css file

Question

I would like to override or include a custom redactor.css file so that I can match the typography of the rich text editor contents with the site's stylesheet.

The path to redactor.css is hard-coded into the application (craft/app/fieldtypes/RichTextFieldType.php - line 281), and obviously I don't want to change this file or the redactor.css file.

Is there at least a way to inject a custom css file into the admin pages so that the core/base styles can be overridden?

---

UPDATE: Both plugin solutions below worked, but because craft includes redactor.css after the plugin's css include is inserted, the trick is to make your css selectors more specific, i.e.:

.redactor_.redactor_editor h1 { font-size: 48px !important; }

Answer 1

You can override the control panel's CSS with a plugin. Use the popular "Control Panel CSS plugin" by Lindsey DiLoreto or make your own little one.

Make use of the includeCssResource() function and include a CSS file with your custom redactor styles:

myRedactorCssPlugin.php:

public function init()
{
    if (craft()->request->isCpRequest())
    {
        craft()->templates->includeCssResource('myRedactorCss/redactor.css');
    }
}

resources/redactor.css:

.redactor_editor h1 {
  font-weight: normal !important;
}
.redactor_editor p {
  background-color: #eee;
}

Answer 2

Use the RedactorStyles plugin, and set the Styles Css field (for inline CSS), or Styles Css File field (for CSS in a file). It's worked great for me.