Where do I add custom css for the Redactor editor in the Craft control panel?

Question

Redactor provides a way to specify custom styles for content in the editor. It's documented here: http://imperavi.com/redactor/examples/typography/

How can I use this approach with Craft?

I've already added custom formatting options to the menu via formattingAdd. That works great and the corresponding custom CSS classes are being applied in the formatting menu, the editor text, and on the site front-end.

But the items in the formatting menu and the editor just look like standard paragraph elements and don't reflect any of the styles that they will have on the site.

Where do I put the CSS so that when my clients are working in the control panel, the styles are visible in the formatting menu and the editor when they are applied?

Answer 1

I ended up using the Control Panel CSS plugin by Lindsey D to do this. Installed the plugin and then pointed it to an external style sheet with my redactor styles.

Here's the plugin: https://github.com/lindseydiloreto/craft-cpcss

And in my stylesheet, the styles look like the below. These examples are for a custom item I added to the redactor formatting menu with a class pullquote__quote. The first style the menu item in the formatting dropdown menu. The second style the text in the editor.

.redactor-dropdown .redactor-formatting-p-pullquote__quote {
  font-size: 20px;
  font-weight: bold;
  color: #ffcb00;
}

.redactor-editor .pullquote__quote {
  font-size: 20px;
  font-weight: bold;
  color: #ffcb00;
}

And my redactor config file for this rich text field has this corresponding addition:

formattingAdd: [
    {
        tag: 'p',
        title: 'Big quote',
        class: 'pullquote__quote'
    }       
]

Answer 2

What you want is the Redactor Styles plugin

In the CSS field you set up any CSS you need to customize the redactor fields in the control panel.