Adding site styles to Redactor editor in Perch

With many of my Perch CMS sites, I use Redactor editor which is installed as a Perch core file. I like the editor (although it has a few quirks on occasion). 

Redactor doesn't have any kind of preview mode although drafts can be previewed in Perch itself. So, on some of my personal sites, I find it's nice to have another "preview" option, between page preview and a full editor live preview mode. I do this by adding some of my site styles to the Redactor editor text area. I realise that there are some caveats with this approach (what if the styles change from page to page?) and that this isn't for everyone or for every site. However, it's relatively simple to do and here's how.

Firstly, you will need a custom style sheet for the Perch UI. Now, you can add styles for the <div> that wraps the editor's text area. This normally has a class called redactor-styles.

Here are two that I've used on another site:

.redactor-styles .highlighted { 
   background-color: #efefef;
   padding: 1em;
}
.redactor-styles blockquote { 
   background-color: #e0e0f4; 
   border-left: 5px solid #66c; 
   padding: 1em;
}

In the first case, my site has a highlighted class on some paragraphs. I can add this by editing the source (source button) in Redactor. Then, my custom style sheet rule means I can see this in the editor.

In the second case, I've added my <blockquote> site styles.

I like to have more padding on both these elements in the editor as well :-)

There are other things you can do. Perhaps it would be useful to have the heading styles more like the site? Or, you may want to increase the text size for SimpleMDE editor. Anyway, I hope this post has given you a few ideas.